KnockoutJS（一）

前端时间因为要准备实习工作，所以提前学了一点KnockoutJS的知识，今天就来总结一下这个JS的类库的特点

KO重要特性：

• 优雅的依赖跟踪-任何时候当数据源模型发生变化时，它都能够自动的更新你UI的指定内容。

• 声明式绑定-它通过简单浅显的方式将你的UI与数据源模型进行绑定，你可以使用任意嵌套的结构模版来组建一个复杂的动态界面。

• 良好的可扩展性-通过简单的几行代码就可以实现一个自定义行为作为新的声明进行绑定。

Knockout是建立在以下3个核心功能之上的:

1、 属性监控与依赖跟踪

2、 声明式绑定

3、 模版机制

我们这一次简单的聊聊第一个特性——属性监控和依赖跟踪

首先我们要了解一下MVVM设计模式和View Model的概念。

MVVM(Model-View-View Model)是一种创建用户界面的设计模式。他将UI分为三个部分，这样就可以简化复杂页面的开发了

model:用于存储你应用程序数据，这些数据表示你业务领域的对象和数据操作，并且独立于任何界面。当时用KO的时候，通常是使用Ajax向服务器请求数据来读写这个数据模型

View Model:纯粹用于描述数据内容和页面操作的数据模型。KO中，ViewModel是纯粹的不包含HTML知识的JS对象

View: 代表View Model状态的一个课件、互动的UI界面。它主要用于显示View Model的数据信息、发送用户命令（例如：当用户点击按钮）一集在View Model发生变化时保持自动更新。KO中，View层就是简单的将HTML文档声明式的绑定到View Model,将他们关联起来。另外，你也可以利用模板从View Model获取数据动态生成HTML

说的简单一些，model就是从数据库真正拿到的数据，viewmodel就是JS，view就是你的页面，这就是KO的模型，通过viewmodel这层，实现了页面和数据的双向绑定，又达到了页面和业务逻辑的解耦。

下边我们来看一个简单的DEMO：

View：

<p>First name: <strong>todo</strong></p><p>Last name: <strong>todo</strong></p>

viewmodel：

function AppViewModel() {    this.firstName = "Bert";    this.lastName = "Bertington";}// Activates knockout.jsko.applyBindings(new AppViewModel());

显示页面：

我们在VM中定义的人名并没有绑定到View上，所以我们需要在view层加上data-bind

<p>First name: <strong data-bind="text: firstName"></strong></p><p>Last name: <strong data-bind="text: lastName"></strong></p>

下边我们看看数据的双向绑定如何实现，这也是MVVM最重要的特性：

首先我们要在View层加入两个输入框

<p>First name: <input data-bind="value: firstName" /></p><p>Last name: <input data-bind="value: lastName" /></p>

我们还需要修改VM层，因为页面上的修改必须通过监测机制才能得到通知

function AppViewModel() {    this.firstName = ko.observable("Bert");    this.lastName = ko.observable("Bertington");}

效果如下：