Knockout學習之表單綁定器（上）

表單綁定器

 

“click”綁定

Click 綁定器可以將javascript函數綁定到指定的dom元素，並且再該元素被點擊時將觸發綁定的函數，大多數情況下都會使用button、input和a元素，當然其他可見的dom元素也是一樣可以的。下面我們就簡單的舉一個例子：

<div>
    你已經點擊了<span data-bind="text:numberOfClicks" ></span>
    <button data-bind="click: incremmentClickCounter">點擊</button>
</div>

<script type="text/javascript">

    var appViewModel = {
        numberOfClicks: ko.observable(0),
        incremmentClickCounter: function () {
            var t = this.numberOfClicks();
            this.numberOfClicks(t + 1);
        }
    }

    ko.applyBindings(appViewModel);
</script>

 

每次點擊按鈕，都可以發現對應的數值在不斷的遞增，當然還有就是在foreach綁定下，使用$parent.xxxxx指定click綁定的函數時，將會把當前這條數據作為第一個參數傳遞給指定的函數，比如下面我們可以通過這種方式來刪除數據：

<ul data-bind="foreach:places" >
    <li>
        <span data-bind="text:$data" ></span>
        <button data-bind="click: $parent.removePlace">刪除</button>
    </li>
</ul>

<script type="text/javascript">

    var appViewModel = function(){
        var self = this;
        this.places = ko.observableArray(['London','Paris','Tokyo']);
        this.removePlace = function (data) {
            self.places.remove(data);
        }
    }

    ko.applyBindings(new appViewModel());
</script>

通過點擊刪除按鈕，將可以刪除對應的項。學過監控數組的還知道另一個方法，就是可以不刪除數據，但是會為這條數據設置標記，同時在foreach中也不會顯示，主要是方面我們與服務器端進行同步。

 

具備一定javascript基礎的讀者應該知道事件還會傳遞一個event參數，而這個參數包含了事件更多具體的參數，當然我們在ko下一樣可以使用，比如我們將上面的代碼改寫。只有按下shift並點擊才可以刪除：

    var appViewModel = function(){
        var self = this;
        this.places = ko.observableArray(['London','Paris','Tokyo']);
        this.removePlace = function (data, event) {
            if (event.shiftKey)
                self.places.remove(data);
        }
}

 

現在我們只有通過按下shift並點擊刪除才可以刪除這條數據了。

 

如果你需要更多的參數那么你可以寫成如下所示的方式：

<button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }">
    點擊
</button>

 

這樣當點擊這個按鈕之后，將會指定myFunction並將param1、param2以及默認的參數傳遞給函數，這對於需要將一個事件按照不同的情況復用的時候很有用。

 

提示：ko將會阻止設置了click綁定器元素的默認行為，比如a標簽，如果設置了click綁定器則不會導致跳轉到href所指定的頁面，如果不想阻止默認行為可以在函數中返回true即可。關於冒泡事件，ko也給我們提供了解決方案，默認情況下ko不會阻止，如果我們需要阻止冒泡可以按照如下的方式設置clickBubble：

<div data-bind="click: myDivHandler">
    <button data-bind="click: myButtonHandler, clickBubble: false">
        點我
    </button>
</div>

 

上面的例子，當我們點擊了div內的button將不會導致div的發生點擊事件。

 

“event”綁定

頁面中不可能僅僅只存在點擊事件，當然還存在其他很多事件，但是都不是很常用，所以ko就提供了一個event可以幫助我們給其他事件綁定函數，當然具體的賦值方式跟click一樣，比如下面我們可以div的mouseover和mouseout綁定監聽事件（事件可以自行寫，沒有限制）：

    <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
        碰我
    </div>

 

當我們的鼠標移動到上面就會導致執行enableDetails函數，當離開之后則會執行disableDetails函數，當然還可以設置其他更多的事件（keypress,mouseover,mouseout）。

 

“submit”綁定

顧名思義，就是用來綁定表單的提交事件的，當然這個綁定器可不是綁定在按鈕上的，而是直接綁定到一個表單中。比如下面的代碼：

<form action="~/Views/Home/Index" data-bind="submit: formSubmit">
    <input type="text" name="a" />
    <button type="submit">提交</button>
</form>

<script type="text/javascript">

    var appViewModel = function () {
        var self = this;
        this.formSubmit = function (formelement) {
            var t = formelement;
        }
    }

    ko.applyBindings(new appViewModel());
</script>

 

formSubmit中的formelement將指向該表單元素，當然ko默認會阻止表單的提交，如果需要取消這個默認行為，可以在函數中返回true即可。

 

“enable”綁定

顧名思義，利用這個綁定器可以控制表單元素是否啟用，如果下面的代碼將可以控制輸入框是否可用：

<input type="text" data-bind="enable:isShow" />
<button type="button" data-bind="click:formSubmit" >開關</button>

<script type="text/javascript">

    var appViewModel = function () {
        var self = this;
        this.isShow = ko.observable(true);
        this.formSubmit = function () {
            self.isShow(!self.isShow());
        }
    }

    ko.applyBindings(new appViewModel());
</script>

 

輸入框一開始是可以輸入的，點擊了按鈕之后輸入狂將會被禁用，基本上它的功能就這些了，另外一個就是 disable 綁定器，在滿足條件時將禁用指定的標簽。

 

“value”綁定

Value綁定器將會把你的視圖模型中的屬性與DOM元素中的value關聯。可以使用於表單元素，如<input>、<select>和<textarea>。當用戶修改了關聯DOM元素中的值將會自動更新視圖模型中關聯的屬性，相反如果你修改了視圖模型中的屬性，那么DOM元素中顯示的值也會跟着變動。

 

比如下面的例子：

<div>
    <label for="username">username:</label>
    <input id="username" type="text" data-bind="value: username" />
</div>
<div>
    <label for="password">password:</label>
    <input id="password" type="text" data-bind="value: password" />
</div>
<div>
    <button type="button" data-bind="click: showInfo">showInfo</button>
</div>

    <script type="text/javascript">

        var appViewModel = function () {
            var self = this;
            this.username = ko.observable("請輸入");
            this.password = ko.observable("");
            this.showInfo = function () {
                alert(self.username() + ":" + self.password());
            };
        }

        ko.applyBindings(new appViewModel());
</script>

 

如果你關聯的視圖模型中的屬性是對象或者數組那么KO就會使用toString的值。所以建議使用字符串或者數值類型。當用戶修改了文本框中的值，並轉移了焦點KO才會更新視圖模型（就是change事件），當然我們可以使用valueUpdate修改這一行為。

 

valueUpdate可以接受如下的值：

“input” ：當<input>或<textarea>標簽中的值改變將會更新視圖模型中的值（支持IE9+）。

“keyup” ：當用戶釋放了一個鍵將會更新視圖模型中的值。

“keypress” ：當用戶完成一個字符輸入時將更新視圖模型中的值。

“afterkeydown” ：當用戶按下一個鍵的同時將會更新視圖模型中的值。

 

比如下面的例子將可以實時的顯示用戶輸入的值：

<div>
    <input type="text" data-bind="value: realvalue,valueUpdate:'input'" />
    <label data-bind="text: realvalue"></label>
</div>

    <script type="text/javascript">

        var appViewModel = function () {
            var self = this;
            this.realvalue = ko.observable("");
        }

        ko.applyBindings(new appViewModel());
    </script>