初步认识knockoutjs

knockout是MVVM模式，所谓的MVVM就是模型(M)、视图(V)、视图模型(VM)。

模型和视图不用解释了，跟MVC中模型和视图是一样的，而视图模型则是把视图和模型进行绑定。

knockout简单的用法：

html中的代码：

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

js中的代码：

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

 

//下面是将模型跟视图绑定
ko.applyBindings(new AppViewModel());

 

如果AppViewModel中的firstName的值发生变化，那么与之绑定的strong标签的值会随之发

生变化，这不是最能体现knockout好处的一个列子；

 

另外一个列子

html中的代码：

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

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

js中的代码：

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

// Activates knockout.js
ko.applyBindings(new AppViewModel());

 

这样写，你就会发现，如果你改变了input的值时，当该input离焦时，你会发现，与该input

相应的strong标签的值立马发生了改变：

最初的效果：

当改变First name文本框中的值后鼠标离焦时，立刻就会出现以下效果：