看一看：Knockout应用开发指南之Hello World

本章展示的4个例子主要是利用了Knockout的基本语法特性，让大家感受到使用Kncokout的快感。

1 Hello world

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

无论哪个输入框更新，都会看到,full name 显示结果都会自动更新。查看HTML源代码可以看到我们不需要声明onchange事件。Knockout知道什么时候该更新UI。

代码: View

<p>Firstname:<inputdata-bind="value:firstName"/></p>
<p>Lastname:<inputdata-bind="value:lastName"/></p>
<h2>Hello,<spandata-bind="text:fullName"></span>!</h2>

代码: View model

//这里是声明的viewmodel 
varviewModel={ 
firstName:ko.observable("Planet"), 
lastName:ko.observable("Earth") 
}; 
viewModel.fullName=ko.dependentObservable(function(){ 
//Knockouttracksdependenciesautomatically. 
//ItknowsthatfullNamedependsonfirstNameandlastName, 
//becausethesegetcalledwhenevaluatingfullName. 
returnviewModel.firstName()+""+viewModel.lastName(); 
}); 
ko.applyBindings(viewModel);//ThismakesKnockoutgettowork

2 Click counter

这个例子展示的创建一个view model并且绑定各种绑定到HTML元素标记上，以便展示和修改view model的状态。

Knockout根据依赖项。在内部，hasClickedTooManyTimes在numberOfClicks上有个订阅，以便当numberOfClicks改变的时候农村房子被强拆要找谁投诉，强制hasClickedTooManyTimes重新执行。相似的，UI界面上多个地方引用hasClickedTooManyTimes，所以当hasClickedTooManyTimes 改变的时候，也讲导致UI界面更新农村旧房会被强拆吗。

不需要手工声明或者订阅这些subscription订阅，他们由KO框架自己创建和销毁。参考如下代码实现：

代码: View

<div>You'veclicked<spandata-bind="text:numberOfClicks">&nbsp;</span>times</div> 
<buttondata-bind="click:registerClick,enable:!hasClickedTooManyTimes()">Clickme</button> 
<divdata-bind="visible:hasClickedTooManyTimes">
That'stoomanyclicks!Pleasestopbeforeyouwearoutyourfingers. 
<buttondata-bind="click:function(){numberOfClicks(0)}">Resetclicks</button>
</div>

代码: View model

varclickCounterViewModel=function(){ 
this.numberOfClicks=ko.observable(0); 
this.registerClick=function(){ 
this.numberOfClicks(this.numberOfClicks()+1); 
} 
this.hasClickedTooManyTimes=ko老百姓的住宅可以强拆吗.dependentObservable(function(){ 
returnthis.numberOfClicks()>=3; 
},this); 
}; 
ko.applyBindings(newclickCounterViewModel());

3 Simple list

这个例子展示的是绑定到数组上。

注意到，只有当你在输入框里输入一些值的时候，Add按钮才可用。参考下面的HTML代码是如何使用enable 绑定。

代码: View

<formdata-bind="submit:addItem">
Newitem: 
<inputdata-bind='value:itemToAdd,valueUpdate:"afterkeydown"'/>
<buttontype="submit"data-bind="enable:itemToAdd().length>0">Add</button>
<p>Youritems:</p>
<selectmultiple="multiple"width="50"data-bind="options:items"></select>
</form>

代码: View model

varviewModel={}; 
viewModel.items=ko.observableArray(["Alpha","Beta","Gamma"]); 
viewModel.itemToAdd=ko.observable(""); 
viewModel.addItem=function(){ 
if(viewModel.itemToAdd()!=""){ 
viewModel.items.push(viewModel.itemToAdd()); 
//Addstheitem.Writingtothe"items"observableArraycausesanyassociatedUItoupdate. 
viewModel.itemToAdd(""); 
//Clearsthetextbox,becauseit'sboundtothe"itemToAdd"observable 
} 
} 
ko.applyBindings(viewModel);

4 Better list

这个例子是在上个例子的基础上添加remove item功能(multi-selection)和排序功能。 ,remove和,sort按钮在不能用的时候会变成disabled状态(例如，没有足够的item来排序)。

参考HTML代码是如何实现这些功能的，另外这个例子也展示了如何使用匿名函数来实现排序。

代码: View

<formdata-bind="submit:addItem">
Additem:<inputtype="text"data-bind='value:itemToAdd,valueUpdate:"afterkeydown"'/>
<buttontype="submit"data-bind="enable:itemToAdd().length>0">Add</button>
</form>
<p>Yourvalues:</p>
<selectmultiple="multiple"height="5"data-bind="options:allItems,selectedOptions:selectedItems"></select>
<div>
<buttondata-bind="click:removeSelected,enable:selectedItems().length>0">Remove</button>
<buttondata-bind="click:function(){allItems.sort()},enable:allItems().length>1">Sort</button>
</div>

代码: View model

//Inthisexample,betterListModelisaclass,andtheviewmodelisaninstanceofit. 
//SeesimpleList.htmlforanexampleofhowtoconstructaviewmodelwithoutdefiningaclassforit.Eithertechniqueworksfine. 
varbetterListModel=function(){ 
this.itemToAdd=newko.observable(""); 
this.allItems=newko.observableArray(["Fries","EggsBenedict","Ham","Cheese"]); 
//Initialitems 
this.selectedItems=newko.observableArray(["Ham"]); 
//Initialselection 
this.addItem=function(){ 
if((this.itemToAdd()!="")&&(this.allItems.indexOf(this.itemToAdd())<0)) 
//Preventblanksandduplicates 
this.allItems.push(this.itemToAdd()); 
this.itemToAdd("");//Clearthetextbox 
} 
this.removeSelected=function(){ 
this.allItems.removeAll(this.selectedItems()); 
this.selectedItems([]);//Clearselection 
} 
}; 
ko.applyBindings(newbetterListModel());

原文：http://www.cnblogs.com/TomXu/archive/2011/11/30/2257067.html

【系列文章】

1. 用JavaScript评估用户输入密码的强度（Knockout版）
2. Knockout应用开发指南之创建自定义绑定
3. Knockout应用开发指南之模板绑定
4. Knockout应用开发指南之绑定语法
5. Knockout应用开发指南之监控属性(Observables)
6. Knockout应用开发指南之入门介绍