knockoutjs 静动态数据、行为绑定，计算属性及Sync同步更新 Value值更新事件控制...

data-bind="text: firstName"中data-bind属性是Knockout 用来显示关联UI和viewmodel的桥梁， text 表示把绑定的文本赋值给DOM元素 

click 用来关联按钮点击事件 

data-bind="value: firstName"来动态绑定到input 输入框的值 当文本框的值发生变化时，ko先更新viewmodel的数据，然后根据observables，来更新Label的值。valueUpdate: "afterkeydown"'可以控制什么事件才触发value的更新操作， 默认onchange 

observables： 观察者模式，当属性发生变化时，主动通知相关者 

computed properties： 根据基础属性计算得到新的属性，当基础属性发生变化时，ko会自动重新计算新的值 

Javascript代码  

1. // 创建一个简单的viewmodel   
2. // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI  
3. function AppViewModel() {  
4.     this.firstName = "Bert";  
5.     this.lastName = "Bertington";  
6.   
7.     // 动态属性  
8.     this.firstName = ko.observable("Bert");  
9.     this.lastName = ko.observable("Bertington");  
10.   
11.     // computed properties 计算属性  
12.     this.fullName = ko.computed(function() {  
13.         return this.firstName() + " " + this.lastName();      
14.     }, this);  
15.   
16.     // last name变大写函数（行为）  
17.     this.capitalizeLastName = function() {  
18.         var currentVal = this.lastName();        // Read the current value  
19.         this.lastName(currentVal.toUpperCase()); // Write back a modified value  
20.     };  
21. }  
22.   
23. // Activates knockout.js  
24. ko.applyBindings(new AppViewModel());  

Html代码  

1. // data-bind属性是Knockout 用来显示关联UI和viewmodel的桥梁 text 表示把绑定的文本赋值给DOM元素  
2. <!-- This is a *view* - HTML markup that defines the appearance of your UI -->  
3.   
4. // 静态文本绑定  
5. <p>First name: <strong data-bind="text: firstName">todo</strong></p>  
6. <p>Last name: <strong data-bind="text: lastName">todo</strong></p>  
7.   
8. // 使用data-bind="value: firstName"来动态绑定到input 输入框的值 当文本框的值发生变化时，ko先更新viewmodel的数据，然后根据observables，来更新Label的值  
9. <p>First name: <input data-bind="value: firstName" /></p>  
10. <p>Last name: <input data-bind="value: lastName" /></p>  
11. <p>Full name: <strong data-bind="text: fullName"></strong></p>  
12.   
13. <button data-bind="click: capitalizeLastName">Go caps</button>