一、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. C和指针 第三章 变量的储存类型 auto、static、register以及static关键词

    变量的储存类型决定标量何时创建,何时销毁以及他的值保持多久.有三个地方可以储存变量: 普通内存static 运行时堆栈auto 硬件寄存器register 变量的缺省储存类型取决于它的声明位置: 静态 ...

  2. java基础 集合类

    java集合类主要有以下集中: List结构的集合类: ArrayList类, LinkedList类, Vector类, Stack类 Map结构的集合类: HashMap类,Hashtable类 ...

  3. Shell 编程 : 数值，字符，字符串

    数值运算命令     expr 命令     expr expression     expression 是由字符串 以及 运算符所组成的,每一个字符串或说运算符之间必须用空格隔开,   运算符的优 ...

  4. Unity3D LuaBundleLoader(基于cslua)

    说明:异步加载lua的bundle,会优先加载cache目录下bundle(一般更新的资源都在cache下) using System; using UnityEngine; using System ...

  5. Python之模块，迭代器与生成器

    本节涉及内容: 1. 迭代器和生成器 2. 递归 3. 字符串格式化 4. 模块 内置模块 自定义模块 第三方模块 5. 序列化的模块 json pickle (一). 迭代器和生成器: 迭代器:  ...

  6. js计算散点图方程式

    //pointArrayX,pointArrayY 为两个数组,分别为x轴对应的点和y轴对应的点 function getEquationPara(pointArrayX, pointArrayY) ...

  7. FreeRTOS学习及移植笔记之二：在IAR和STM32F103VET上移植FreeRTOS

    上一次,我们简单的测试了FreeRTOS的基于IAR EWARM v6.4和STM32F103VET6平台的Demo,对其有了一个基本认识.接下来我们开始自己移植FreeRTOS的过程. 1.创建一个 ...

  8. JQuery简单标签页实现

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  9. checkbox实现互斥

    <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.x ...

  10. Ubuntu菜鸟入门（二）—— apt认知，且完善语言安装包

    一  语言安装包安装 1  原因 虽然安装的中文版,但是由于安装包很小,所以汉化的不够完全,所以要安装后,再下载语言包进行安装 2  方法 二  apt--软件包管理器 1   软件源 (1) 介绍 ...