【Knockout】3、data-bind声明式绑定

1.visible绑定

<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里的哪一项。