标签：
<div id="myview" data-bind="visible : isVisible">
visible bind
</div>
<script>
var viewModel = {
isVisible : ko.observable(true)
};
viewModel.isVisible(false);
var el = document.getElementById(‘myview‘);
ko.applyBindings(viewModel,el);
</script>
2.text绑定
<div id="myview" data-bind="text : name">
visible bind
</div>
<script>
var viewModel = {
name : ko.observable("knockout")
};
var el = document.getElementById(‘myview‘);
ko.applyBindings(viewModel,el);
</script>
3.html绑定
<div id="myview" data-bind="html : htmlContent"> </div>
<script>
var viewModel = {
htmlContent : ko.observable("<i>html bind</i>")
};
var el = document.getElementById(‘myview‘);
ko.applyBindings(viewModel,el);
</script>
4.CSS绑定
<div id="myview" data-bind="css : {redbg : testValue() < 0}">
css bind
</div>
<script>
var viewModel = {
testValue : ko.observable(-1)
};
var el = document.getElementById(‘myview‘);
ko.applyBindings(viewModel,el);
</script>
view会随着监控属性的变化自动添加或者删除元素上的CSS class。
5.style绑定
<div id="myview" data-bind="style : {color : testValue() < 0 ? ‘red‘ : ‘blue‘}">
css bind
</div>
<script>
var viewModel = {
testValue : ko.observable(1)
};
var el = document.getElementById(‘myview‘);
ko.applyBindings(viewModel,el);
</script>
view会随着监控属性的变化自动添加或者删除该元素的style值。
6.attr绑定
<div id="myview" data-bind="attr : {title : titleName}">
</div>
<script>
var viewModel = {
titleName : ko.observable("attr bind")
};
var el = document.getElementById(‘myview‘);
ko.applyBindings(viewModel,el);
</script>
7.click绑定
<div data-bind="text : clickCount">
</div>
<button data-bind="click : clickFunc">click me</button>
<script>
var viewModel = {
clickCount : ko.observable(0),
clickFunc : function(){
var value = this.clickCount();
this.clickCount(value+1);
}
};
ko.applyBindings(viewModel);
</script>
注意：
（1）默认情况下，knockout会阻止默认事件的执行，例如，当你点击一个a元素，它在执行完viewModel的自定义事件后不会连接到href地址。如果想继续执行默认事件，可在click的自定义函数里返回true。
（2）默认情况下，knockout允许click事件继续往更高层的事件句柄上冒泡执行，例如：
<div data-bind="click : clickDiv">
<button data-bind="click : clickButton,clickBubble : false">click</button>
</div>
<script>
var viewModel = {
clickDiv : function(){
alert(‘click div‘);
},
clickButton : function(){
alert(‘click button‘);
}
};
ko.applyBindings(viewModel);
</script>
一旦设置了clickBubble为false时，则会阻止冒泡。
8.event绑定
<div data-bind="event : {mouseover : show,mouseout : hide}">
mouse over me
</div>
<div data-bind="visible : isVisible">
mouse over bind
</div>
<script>
var viewModel = {
isVisible : ko.observable(false),
show :function(){
this.isVisible(true);
},
hide : function(){
this.isVisible(false);
}
};
ko.applyBindings(viewModel);
</script>
注意：event绑定也和click绑定一样，默认情况下，knockout会阻止默认事件的执行，在自定义函数里返回true可继续执行默认事件，knockout同样会允许事件冒泡，设置mouseoverBubble为false可阻止事件冒泡，其他事件类似。
9.submit绑定
knockout会吧整个form表单元素传递到自定义函数中
<form data-bind="submit : submitHandle">
form bind..........
<button type="submit">submit</button>
</form>
<script>
var viewModel = {
submitHandle : function(formElement){
//to do...
}
};
ko.applyBindings(viewModel);
</script>
注意：默认情况下，knockout会阻止form表单的默认submit动作，即浏览器不会提交表单到服务器，而是只会执行你的submit句柄，如果想继续执行form表单的submit操作，可在句柄里返回true。
10.enable、disable绑定
enable、disabled绑定使DOM元素只有在参数值为 true的时候才enabled、disabled。
11.value绑定
关联dom元素的值到viewModel上。
例如：用户在编辑表单控件的时候，viewModel属性会自动更新，同样viewModel的属性更新的时候，页面上的值也会随之更新。
<input data-bind="value : name">
<script>
var viewModel = {
name : ko.observable("123")
};
ko.applyBindings(viewModel);
</script>
valueUpdate参数：
"change"(默认值) ： 失去焦点或者select元素被选中的时候更新viewModel；
"keyup" : 用户在敲完一个字符后立即更新viewModel；
"keypress" : 按下键盘时开始更新viewModel；
"afterkeydown" ： 用户开始输入字符时就开始更新viewModel；
例如
<input data-bind="value : name,‘valueUpdate‘ : keyup">
注意：knockout对下拉菜单drop-down list（如select）做value绑定时，这个值可以是任意js对象，而不必非是字符串。
12.checked绑定
checked绑定时关联到checkbox（<input type="checkbox">）或者radio button（<input type="radio">）;
<input type="checkbox" data-bind="checked : isCheck">
<script>
var viewModel = {
isCheck : ko.observable(true)
};
ko.applyBindings(viewModel);
</script>
checkbox 关联到数组：
当参数是一个数组的时候，如果元素的值（value）存在于数组，ko将设置元素为checked，否则设置为unchecked，反之，如果用户对元素进行checked或者unchecked，KO就会将元素的值添加进数组或者从数组中删除。
<div>
<input type="checkbox" value="one" data-bind="checked : isCheck">
</div>
<div>
<input type="checkbox" value="two" data-bind="checked : isCheck">
</div>
<div>
<input type="checkbox" value="three" data-bind="checked : isCheck">
</div>
<script>
var viewModel = {
isCheck : ko.observableArray(["one","two"])
};
ko.applyBindings(viewModel);
</script>
radio：
<div>
<input type="radio" name="group" value="one" data-bind="checked : isCheck">
</div>
<div>
<input type="radio" name="group" value="two" data-bind="checked : isCheck">
</div>
<div>
<input type="radio" name="group" value="three" data-bind="checked : isCheck">
</div>
<script>
var viewModel = {
isCheck : ko.observable("three")
};
ko.applyBindings(viewModel);
</script>
13.options绑定
options绑定控制什么样的options在drop-down列表里（如select或者multi-select），并且不能用于select之外的元素，关联的数据时数组（observable数组）；
<select data-bind="options : name"></select>
<script>
var viewModel = {
name : ko.observableArray([‘tom‘,‘jim‘,‘jack‘])
};
ko.applyBindings(viewModel);
</script>
注意：如果想要设置或者获取select列表的值应用value绑定，对于multi-select用selectedOptions绑定。
drop-down列表里可以是任意的javascript对象，不仅是字符串：
<select data-bind="options : persons,optionsText : function(item){
return item.name + ‘ age : ‘ + item.age},value : selectedPerson,optionsCaption : ‘choosen...‘"></select>
<script>
var Person = function(name,age){
this.name = name;
this.age = age;
};
var viewModel = {
persons : ko.observableArray([
new Person(‘Tom‘,23),
new Person(‘jerry‘,24),
new Person(‘jack‘,25),
new Person(‘james‘,26)
]),
selectedPerson : ko.observable()
};
ko.applyBindings(viewModel);
</script>
该参数是一个observa数组，对于每一个item，ko都会将它们作为一个option添加到select里，之前的options都会被删除。
参数：
optionsCaption：drop-down列表里默认选择的项目，它的值是字符串类型的，value为undefined。
例如：
<select data-bind=‘options: myOptions, optionsCaption: "Select an item...", value: myChosenValue‘></select>
如果myChosenValue为undefined，那么默认项就会被选中。
optionsText ： drop-dwon列表里显示的文本；
optionsValue ： 和optionsText类似, 你也可以通过额外参数optionsValue来声明对象的那个属性值作为该<option>的value值。
经典场景：如在更新options的时候想保留原来的已经选择的项。例如，当你重复多次调用Ajax获取car列表的时候，你要确保已经选择的某个car一直都是被选择上，那你就需要设置optionsValue为“carId”或者其它的unique标示符，否则的话KO找不知道
之前选择的car是新options里的哪一项。
标签：
原文地址：http://www.cnblogs.com/baicj/p/5075912.html
