概述
除了上一篇列出的KO內(nèi)置的綁定類型（如value、text等），你也可以創(chuàng)建自定義綁定。
注冊你的binding handler
ko.bindingHandlers.yourBindingName = { init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { // This will be called when the binding is first applied to an element // Set up any initial state, event handlers, etc. here }, update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { // This will be called once when the binding is first applied to an element, // and again whenever any observables/computeds that are accessed change // Update the DOM element based on the supplied values here. }}; 接下來你就可以在任意dom元素上使用的自定義綁定了：
<div data-bind="yourBindingName: someValue"> </div>
注意：你不必在你的handler里把init和update的callback都提供，可以提供任意一個。
update callback
顧名思義，當(dāng)你的監(jiān)控屬性observable更新的時候，ko會自動調(diào)用你的update回調(diào)。
它有以下參數(shù)：
element：使用這個綁定的dom元素；
valueAccessor ： 通過調(diào)用valueAccessor()可以獲得當(dāng)前綁定的model屬性值，調(diào)用ko.unwrap(valueAccessor())能夠更方便的獲取observable的值和普通值；
allBindings ： 綁定到這個dom元素上的model的所有屬性值，例如調(diào)用callBindings.get('name') 返回綁定的name屬性值（不存在返回undefined），或者調(diào)用allBindings.has('name')判斷name是否綁定到了當(dāng)前的dom中；
viewModel : 在Knockout.3x中以棄用，可用bindingContext.$data或者bindingContext.$rawData來獲取當(dāng)前的viewModel；
bindingContext ： 綁定上下文，可調(diào)用bindingContext.$data、 bindingContext.$parent, bindingContext.$parents等獲取數(shù)據(jù)；
接下來看一個例子，你也許希望使用visible綁定來控制元素的可見性，并且加上動畫效果，這時你可以創(chuàng)建你的自定義綁定：
ko.bindingHandlers.slideVisible = { update: function(element, valueAccessor, allBindings) { // First get the latest data that we're bound to var value = valueAccessor(); // Next, whether or not the supplied model property is observable, get its current value var valueUnwrapped = ko.unwrap(value); // Grab some more data from another binding property var duration = allBindings.get('slideDuration') || 400; // 400ms is default duration unless otherwise specified // Now manipulate the DOM element if (valueUnwrapped == true) $(element).slideDown(duration); // Make the element visible else $(element).slideUp(duration); // Make the element invisible }}; 然后你可以這樣使用這個自定義綁定：
<div data-bind="slideVisible: giftWrap, slideDuration:600">You have selected the option</div><label><input type="checkbox" data-bind="checked: giftWrap" /> Gift wrap</label><script type="text/javascript"> var viewModel = { giftWrap: ko.observable(true) }; ko.applyBindings(viewModel);</script> init callback
ko將為每個使用綁定的dom元素調(diào)用你的init函數(shù)，它有兩個主要用途：
（1）為dom元素設(shè)置初始化狀態(tài)；
（2）注冊一些事件處理程序，例如：當(dāng)用戶點擊或者修改dom元素時，你可以改變監(jiān)控屬性的狀態(tài)；
ko將使用和update回調(diào)完全相同一組參數(shù)。
繼續(xù)前面的例子，你也許想讓slideVisible在頁面第一次顯示的時候就設(shè)置該元素的可見性狀態(tài)（沒有任何動畫效果），而動畫效果是在以后改變的時候執(zhí)行，你可以按照下面的方式來做：
ko.bindingHandlers.slideVisible = { init: function(element, valueAccessor) { var value = ko.unwrap(valueAccessor()); // Get the current value of the current property we're bound to $(element).toggle(value); // jQuery will hide/show the element depending on whether "value" or true or false }, update: function(element, valueAccessor, allBindings) { // Leave as before }}; giftWrap被初始化定義為false（ko.observable(false)），關(guān)聯(lián)的DIV會在初始化的時候隱藏，之后用戶點擊checkbox時才讓DIV顯示。
你現(xiàn)在已經(jīng)知道如何使用update回調(diào)了，當(dāng)observable值改變的時候你可以更新dom元素。我們現(xiàn)在可以用另外的方法來做，比如當(dāng)用戶有某個action操作時，也能引起你的observable值更新，例如：
ko.bindingHandlers.hasFocus = { init: function(element, valueAccessor) { $(element).focus(function() { var value = valueAccessor(); value(true); }); $(element).blur(function() { var value = valueAccessor(); value(false); }); }, update: function(element, valueAccessor) { var value = valueAccessor(); if (ko.unwrap(value)) element.focus(); else element.blur(); }}; 現(xiàn)在你可以通過元素的“focusedness”綁定來讀寫你的observable值了。
<p>Name: <input data-bind="hasFocus: editingName" /></p><!-- Showing that we can both read and write the focus state --><div data-bind="visible: editingName">You're editing the name</div><button data-bind="enable: !editingName(), click:function() { editingName(true) }">Edit name</button><script type="text/javascript"> var viewModel = { editingName: ko.observable() }; ko.applyBindings(viewModel);</script> 以上內(nèi)容是小編給大家分享的Knockout自定義綁定創(chuàng)建方法，希望大家喜歡。
