Knockout.Js官網學習（建立自定義綁定）

前言

你能夠建立本身的自定義綁定 – 沒有必要非要使用內嵌的綁定（像click，value等）。你能夠你封裝複雜的邏輯或行爲，自定義很容易使用和重用的綁定。例如，你能夠在form表單裏自定義像grid，tabset等這樣的綁定。

註冊你的綁定

添加子屬性到ko.bindingHandlers來註冊你的綁定：　　

<script type="text/javascript">
    ko.bindingHandlers.yourBindName = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel){
            ///綁定時，設置任何初始狀態，事件處理程序
        },
        update: function (element,valueAccessor,allBindingsAccessor,viewModel) {
            ///綁定以後應用於dom元素上，而後觀察dom元素的變化，進行相應調用更新
        }
    };
</script>

而後就能夠在任何DOM元素上使用了：

<div data-bind="yourBindingName: someValue"> </div>

你實際上不必把init和update這兩個callbacks都定義，你能夠只定義其中的任意一個。

update回調

當管理的observable改變的時候，KO會調用你的update callback函數，而後傳遞如下參數：

element — 使用這個綁定的DOM元素
valueAccessor —JavaScript函數，經過valueAccessor()能夠獲得應用到這個綁定的model上的當前屬性值。
allBindingsAccessor —JavaScript函數，經過allBindingsAccessor ()獲得這個元素上全部model的屬性值。
viewModel — 傳遞給ko.applyBindings使用的 view model參數，若是是模板內部的話，那這個參數就是傳遞給該模板的數據。

例如，你可能想經過 visible綁定來控制一個元素的可見性，可是你想讓該元素在隱藏或者顯示的時候加入動畫效果。那你能夠自定義本身的綁定來調用jQuery的slideUp/slideDown 函數：

    ko.bindingHandlers.slidVisible = {
        update: function (element, valueAccessor, allBingingsAccessor, viewModel) {

            var value = valueAccessor(), allBindings = allBindingsAccessor();
            
            var valueUnwrapped = ko.utils.unwrapObservable(value);

            var duration = allBindings.slideDuration || 400;

            if (valueUnwrapped == true) {
                $(element).slideDown(duration);
            }
            else {
                $(element).slideUp(duration);
            }
        }
    };

而後你能夠像這樣使用你的綁定：

<div data-bind="slideVisible: giftWrap, slideDuration:600">You have selected the option</div>
<label><input type="checkbox" data-bind="checked: giftWrap" /> Gift wrap</label>

左邊是初始化的，右邊是點擊Check以後的 ，你也能夠運行查看效果，消失和出現都是漸變的效果，這自定義的綁定仍是不錯的。

init回調

Knockout在DOM元素使用自定義綁定的時候會調用你的init函數。init有兩個重要的用途：

1.爲Dom元素設置初始值

2.註冊事件句柄，例如當用戶點擊或者編輯Dom元素的時候，你能夠改變相關的observable值的狀態。

KO會傳遞和update回調函數同樣的參數。

繼續上面的例子，你能夠像讓slideVisible在頁面第一次顯示的時候設置該元素的狀態（可是不使用任何動畫效果），而只是讓動畫在之後改變的時候再執行。你能夠這樣來作：

    ko.bindingHandlers.slideVisible = {
        init: function(element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());
            $(element).toggle(value);
        },
        update: function (element, valueAccessor, allBingingsAccessor, viewModel) {

            var value = valueAccessor(), allBindings = allBingingsAccessor();
            
            var valueUnwrapped = ko.utils.unwrapObservable(value);

            var duration = allBindings.slideDuration || 400;

            if (valueUnwrapped == true) {
                $(element).slideDown(duration);
            }
            else {
                $(element).slideUp(duration);
            }
        }
    };

這就是說giftWrap的初始值聲明的是false（例如giftWrap: ko.observable(false)），而後讓初始值會讓關聯的DIV隱藏，以後用戶點擊checkbox的時候會讓元素顯示出來。

DOM事件以後更新observable值

你已經值得了如何使用update回調，當observable值改變的時候，你能夠更新相關的DOM元素。可是其它形式的事件怎麼作呢？好比當用戶對某個DOM元素有某些action操做的時候，你想更新相關的observable值。

你可使用init回調來註冊一個事件句柄，這樣能夠改變相關的observable值，例如

    ko.bindingHandlers.hasfocus = {
        init: function (element, valueAccessor) {
            $(element).focus(function () {
                var value = valueAccessor();
            });
            $(element).blur(function () {
                var value = valueAccessor();
                value(false);
            });
        },
        update: function (element, valueAccessor) {
            var value = valueAccessor();
            if (ko.utils.unwrapObservable(value)) {
                element.focus();
            }
            else {
                elemen.blur();
            }
        }
    };

如今你能夠經過hasFocus綁定來讀取或者寫入這個observable值了：

<h2>DOM事件以後更新observable值</h2>
<p>Name: <input data-bind="hasFocus: editingName" /></p>
<div data-bind="visible: editingName">You're editing the name</div>
<button data-bind="enable: !editingName(), click:function() { editingName(true) }">Edit name</button>

當元素得到焦點和失去焦點