KnockoutJS(1)-数据模型
前言
说到数据模型（ViewModel），就不得不提到MVVM模式，接触过WPF和Silverlight的人应该对这个模式比较熟悉。
不熟悉也没多大关系，因为KnockoutJS的使用相对简单。
MVVM和View Models
Model-View-View Model (MVVM)是一种创建用户界面的设计模式。
通过它只要将UI界面分成以下3个部分，就可以使复杂的界面变得简单：
1、Model，用于存储你应用程序数据，这些数据表示你业务领域的对象和数据操作（例如：银行可以进行资金转账），并且独立于任何界面。
当使用KO的时候，通常是使用Ajax向服务器请求数据来读写这个数据模型。
2、View Model，纯粹用于描述数据内容和页面操作的数据模型。例如，如果你想实现一个列表编辑器，你的ViewModel（数据模型）就是项目清单对象和你所暴露出来的添加和删除列表项的方法。
注意：这不是UI本身，它不具有任何按钮和显示样式的概念。这不是持久化的数据模型—它仅是用户当前使用的未保存的数据。
当使用KO时，你的View Model（数据模型）是纯粹的不包含HTML知识的JavaScript对象，保持View Model（数据模型）抽象在使用时可以保持简单，因此你可以更简单的操作管理更复杂的行为。
3、View，代表View Model状态的一个可见、互动的UI界面。
它主要用于显示View Model的数据信息、发送用户命令（例如，当用户点击按钮）以及在View Model发生变化时保持自动更新。
使用KO时，你的View层主要就是简单的将HTML文档声明式的绑定到View Model，将它们关联起来。
另外，你也可以利用模版从View Model获取数据动态生成HTML。
一般使用步骤
1. 使用KO创建一个View Model，仅仅只需要声明一个JavaScript对象，例如：
var myViewModel = { personName: ‘Bob‘, personAge: 123 };
2. 创建一个简单的视图声明式绑定到这个View Model上，例如，下面的代码显示personName的值：
The name is <span data-bind="text: personName"></span>
3. 激活Knockout data-bind属性并不是HTML固有对象，但使用它是完全正确的（这是完全遵守HTML5，尽管有验证器指出这是一个无法验证的属性，但在HTML4当中使用是不会造成任何问题的）。但浏览器并不知道它是什么意思，所以你需要激活Knockout来使其生效。
激活Knockout，只需要将下面的代码加到<script>标签中就可以了：
ko.applyBindings(myViewModel);
你可以将这个代码放到文档底部，或者放在顶部包含在DOM处理完成诸如JQuery的$函数方法中。
以上操作完成后，你的View（页面）显示的内容等同于编写以下HTML代码：
The name is <span>Bob</span>
ko.applyBindings使用参数
第一个参数是你想激活KO时用于声明式绑定的View Model对象；
第二个参数（可选），你可以使用第二个参数来设置要使用data-bind属性的HTML元素或容器。例如：
ko.applyBindings(myViewModel, document.getElementById(‘someElementId‘))
它限制了只有ID为someElementId的元素才能激活使用KO功能，当你在一个页面中声明了多个View Model来绑定不同的界面区域时，这样限制是很有好处的。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
