一、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. Hydra用户手册

    Hydra 参数: -R继续从上一次进度接着破解 -S大写,采用SSL链接 -s <PORT>小写,可通过这个参数指定非默认端口 -l <LOGIN>指定破解的用户,对特定用户 ...

  2. 无需activity获得屏幕尺寸

    原文地址:http://blog.sina.com.cn/s/blog_4c277ad30100yfqo.html 客户需求需要增加对手机尺寸的读取 于是找了两个方法 第一种:通过activity引用 ...

  3. Codeforces 696 D. Legen...

    Description 每个字符串有些价值,问生成长度为 \(l\) 的字符串最多能获得多少价值,总字符数不超过 \(200\), \(l\leqslant 10^{14}\) . Sol AC自动机 ...

  4. mysql状态取反(0变1,1变0)

    如果要改变status状态 update   table_name   status=ABS(status-1);   //取绝对值 则0-->1   1-->0

  5. IIS跳转html页面自动识别是PC端还是手机端

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. java面试题及答案（转载）

    JAVA相关基础知识1.面向对象的特征有哪些方面 1.抽象:抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分,暂时 ...

  7. 表格中每行的checkbox只能选中其中一个jquery实现

    HTML代码: <span class="number">12.</span> <div class="survey_txt mgl20&q ...

  8. iOS开发多线程篇 — GCD的常见用法

    一.延迟执行 1.介绍    iOS常见的延时执行有2种方式 (1)调用NSObject的方法 [self performSelector:@selector(run) withObject:nil ...

  9. form.submit(回调函数)——引用jq-form.js

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  10. SQL Server Database 维护计划创建完整的备份策略

    SQL Server的维护计划Maintenance Plan是一个非常实用的维护工具,可以完成大多数的数据库维护任务,通过对这些功能的封装,可以省去很多的代码编写时间.网络上完整介绍的不是很多,特此 ...