一、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. 【Alpha版本】冲刺-Day1

    队伍:606notconnected 会议时间:11月9日 会议总结 张斯巍(433) 今天安排:设计登陆界面背景,图标的大小规定 完成度:90% 明天计划:主界面图标的修改,侧边栏背景设计,个人信息 ...

  2. 自写网站入门阶段之三：兼容大战与jq初探

    自上一次作小结至今已整整一个月,在忙乎了半个月的工作之后闲下来的一个下午我终于可以再次作这个阶段的小结了.首先庆幸的是在同学的推荐下我顺利的找到了工作并于月初3号正式上班,这一点非常感谢他,让我免去了 ...

  3. 使用php+swoole对client数据实时更新(上)

    如果想对一个列表做实时的更新,传统的做法是采用轮询的方式.以web为例,通过Ajax定时请求服务端然后获取数据显示在页面.这种方式实现简单,缺点就是浪费资源. HTTP1.1新增加了对websocke ...

  4. PHP array 操作函数

    array_map 函数的介绍 将数组的每个单元使用回调函数格式: array_map(callback, array) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...

  5. tornadod的异步代码

    #!/usr/bin/env python # -*- coding: utf-8 -*- import tornado.httpserver import tornado.ioloop import ...

  6. PHPStorm XDebug的安装

    环境: 我的系统: 4.4.0-43-generic #63-Ubuntu SMP Wed Oct 12 13:48:03 UTC 2016 x86_64 x86_64 x86_64 GNU/Linu ...

  7. kettle系列-3.kettle读取数据库资源库很慢的优化

    环境:windows7,jvm内存设置14G,kettle5.1后来升级到5.4,oracle作为资源库. 问题背景:我们通过web页面管理kettle的job运行,这只是一个管理界面,即使web项目 ...

  8. Python WebDriver自动化测试

    转载来自: http://www.cnblogs.com/fnng/p/3160606.html Webdriver Selenium 是 ThroughtWorks 一个强大的基于浏览器的开源自动化 ...

  9. IL指令详细

    名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Add.Ovf 将两个整数相加,执行溢出检查,并且将结果推送到计算堆栈上. Add.Ovf.Un 将两个无符号整数值相加,执行溢出检查,并且 ...

  10. java中的继承与oc中的继承的区别

    为什么要使用继承? 继承的好处: (1)抽取出了重复的代码,使代码更加灵活 (2)建立了类和类之间的联系 继承的缺点: 耦合性太强 OC中的继承 1.OC中不允许子类和父类拥有相同名称的成员变量名:( ...