Knockout 简单例子 Hello World

这个 Hello World 例子里，2个输入框都被绑定到data model上的observable变量上。“full name”显示的是一个computed observable，它的值是前面2个输入框的值合并一起的结果。

HTML:

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

Model:

// 这是data model
var ViewModel = function(first, last) {
 this.firstName = ko.observable(first);
 this.lastName = ko.observable(last);
 
 this.fullName = ko.pureComputed(function() {
 // Knockout tracks dependencies automatically. 
 // It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
 return this.firstName() + " " + this.lastName();
 }, this);
};
 
ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work