一、ko对象 js对象的改变都会导致viewmodel的变化，但view不一定变化

  • 往ko对象里面push，viewmodel的变化，引起view的变化。
  • 往js对象里面push，model的变化引起viewmodel的变化，不能引起view的变化
<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

	</head>

	<body>

		<ul data-bind="foreach:arr">

			<li data-bind="text:$data.chineseName"></li>

		</ul>

		<button data-bind="click:addOnePlanet">添加</button>

		<script type="text/javascript" src="knockout.js"></script>

		<script type="text/javascript">

		var  Planets = [

					{id:1,englishName:"Mercury",chineseName:"水星",description:"离太阳最近的一颗行星"},

					{id:2,englishName:"Venus",chineseName:"金星",description:"拥有非常厚的大气层的一颗行星"},

					{id:3,englishName:"Earth",chineseName:"地球",description:"我们的家园"}

				];

		var vm=function(){

			var self=this;

			self.arr=ko.observableArray(Planets);

			self.addOnePlanet=function(){

				//记得：往ko对象里面push  model的变化-->viewmodel的变化

				self.arr.push({id:4,englishName:"Mars",chineseName:"火星",description:"一颗红色的星球"})

				//往js对象里面push  model的变化不能引起viewmodel的变化

				//Planets.push({id:4,englishName:"Mars",chineseName:"火星",description:"一颗红色的星球"})

				console.log(self.arr().length);//不论哪个都会self.arr().length都会增加

			}

		}

		ko.applyBindings(new vm());

		</script>

	</body>

</html>

KnockoutJS:的更多相关文章

  1. 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑

    Part 3: 设计逻辑层:核心开发 如前所述,我们的解决方案如下所示: 下面我们讨论整个应用的结构,根据应用中不同组件的逻辑相关性,分离到不同的层中,层与层之间的通讯通过或者不通过限制.分层属于架构 ...

  2. 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 4 - 验证

    验证: 快要完成我们程序的界面部分了.剩下的事情就是在用户点击 "保存" 的时候管理验证问题了.验证是主要需求,今天就是最无知的应用也不会忽视它.通过正确的验证,用户可以知道应该输 ...

  3. 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 3

    原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...

  4. 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 1

    原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...

  5. knockoutjs如何动态加载外部的file作为component中的template数据源

    玩过knockoutjs的都知道,有一个强大的功能叫做component,而这个component有个牛逼的地方就是拥有自己的viewmodel和template, 比如下面这样: ko.compon ...

  6. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（一）

    前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...

  7. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（四）：自定义T4模板快速生成页面

    前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...

  8. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（三）：两个Viewmodel搞定增删改查

    前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...

  9. KnockoutJS 3.X API 第八章 映射(mapping)插件

    Knockout旨在允许您将任意JavaScript对象用作视图模型. 只要一些视图模型的属性是observables,您可以使用KO将它们绑定到您的UI,并且UI将在可观察属性更改时自动更新. 大多 ...

  10. KnockoutJS 3.X API 第六章 组件(5) 高级应用组件加载器

    无论何时使用组件绑定或自定义元素注入组件,Knockout都将使用一个或多个组件装载器获取该组件的模板和视图模型. 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对. 本节目录 默认组件加 ...

随机推荐

  1. JavaScript学习总结（二）数组和对象部分

    pt学习总结(二)数组和对象部分 2016-09-16    分类:WEB开发.编程开发.首页精华暂无人评论     来源:trigkit4 分享到:更多1 对象部分 Object类型 Object  ...

  2. Android多种进度条使用详解

    在这里,总结一下loading进度条的使用简单总结一下. 一.说起进度条,必须说说条形进度条,经常都会使用到嘛,特别是下载文件进度等等,还有像腾讯QQ安装进度条一样,有个进度总给人良好的用户体验. 先 ...

  3. js倒计时代码 适合于促销-倒计时代码

    <div class="tiem_price clearfix fonts" style="margin-top:15px;"> <div c ...

  4. nginx配置301重定向

    1. 简介 301重定向可以传递权重,相比其他重定向,只有301是最正式的,不会被搜索引擎判断为作弊 2. 栗子 savokiss.com 301到 savokiss.me 3. nginx默认配置方 ...

  5. Path之Data属性语法A命令

    <Path Width="300" Height="300" Fill="Red" Data="M 100,100 L 10 ...

  6. java 深入技术三(List)

    List ArrayList List接口 List接口的父接口-Collection List接口的重要子类- ArrayList -LikedList List接口不重要子类-Vector jav ...

  7. iOS开发UI篇—核心动画(关键帧动画)

    转自:http://www.cnblogs.com/wendingding/p/3801330.html iOS开发UI篇—核心动画(关键帧动画) 一.简单介绍 是CApropertyAnimatio ...

  8. (转)nginx优化 实现10万并发访问量

    转自http://www.cnblogs.com/pricks/p/3837149.html 一般来说nginx配置文件中对优化比较有作用的为以下几项:worker_processes 8;1 ngi ...

  9. ASP.NET知识总结（6.一般处理程序动态处理图片（验证码、水印、缩略图））

    ->使用GDI+完成图片的处理,需要引入程序集System.Drawing ->GDI+的基本处理模型 <1>创建画布Bitmap <2>创建画图工具对象Graph ...

  10. oracle 12c中的隐含列

      Invisible Columns 使用select * from ,desc 等看不到该列, DROP TABLE tab1 PURGE; CREATE TABLE tab1 ( id NUMB ...