【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裏的哪一項。