MVVM和viewModel

Knockout是建立在以下三大核心功能之上的：

1. 监控属性和依赖跟踪（Observables and dependency tracking）
2. 声明式绑定（Declarative bindings）
3. 模板（Templating）

首先让我们先来了解下MVVM模式，和viewModel的概念。

MVVM（model、view、viewModel）是一种创建用户界面的设计模式，他旨在将一个复杂的UI简单的分割为三个部分：

• model ： 在你的应用用作存储数据；
• view ： 一个可见的、交互的UI来展现viewModel的状态；
• viewModel ： 用纯净的代码来展现ui的数据和操作，可是任意的javascript对象

首先创建一个viewModel，仅仅需要声明一个任意的javascript对象，例如：

var viewModel = {
　　name : ‘knockout‘
};

然后为viewModel创建一个声明式的绑定view，例如：

<div id="myview" data-bind="text : name"></div>

最后激活knockout，例如

ko.applyBindings(viewModel,document.getElementById(‘myview‘));

data-bind属性毕竟不是原生的html属性，即使它能够完美的工作，但是浏览器不认识它，你需要激活knockout使它生效。

这样就把一个最简单的viewModel和view绑定到了一起，能够在view里显示viewModel的属性name了，但是，view却不能再viewModel改变的时候自动更新，viewModel也不能再view改变是自动更新！

Observables

knockout的一个重要功能observable（监控属性）就是能够自动自动探测相关的依赖与通知订阅者（automatic dependency detection and notification triggering），即在建立绑定关系的view和

viewModel之间能够在一方改变的时候更新另一方的值。

我们将viewModel稍作修改：

 var viewModel = {
 　　name : ko.observable("knockout")
 };

现在他就能监控到变化，view就能够自动更新了。

监控属性的读写操作：

1.读取监控属性的值：

viewModel.name();

2.写一个新值到监控属性中：

viewModel.name("new value");

Dependency observables(依赖监控属性)

定义viewModel：

var viewModel = {
　　firstName : ko.observable("first"),
   lastName : ko.observable("last")
};

定义依赖监控属性：

viewModel.fullName = ko.dependentObservable(function () {
　　return this.firstName() + " " + this.lastName();
}, viewModel);

定义view：

<div id="myview" data-bind="text : fullName"></div>

不管任意的监控属性（firstName、lastName）改变的时候，依赖监控属性fullName都会自动更新。