Knockoutjs实战开发：创建自定义绑定(Creating custom bindings)

在使用Knockoutjs时我们并不仅仅限于使用内建的绑定，比如：click、value等，我们可以创建自己的绑定规则。Knockoutjs为我们提供了非常灵活的支持，能够让我们自己去处理非常复杂的业务并且构造出可重用性的绑定。例如我们可以创建交互式的组件，比如表格、网格等。下面我们就来看看怎么一步步创建自定义绑定。

一、等级我们的绑定(Registering your binding)

我们可以通过ko.bindingHandlers来进行绑定。

 1 ko.bindingHandlers.yourBindingName = { 

 2     init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 

 3         // This will be called when the binding is first applied to an element 

 4         // Set up any initial state, event handlers, etc. here 

 5     }, 

 6     update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 

 7         // This will be called once when the binding is first applied to an element, 

 8         // and again whenever the associated observable changes value. 

 9         // Update the DOM element based on the supplied values here. 

10     } 

11 };

接着我们就可以在DOM元素中使用我们自定义的绑定了。

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

注：在实际使用中你不用同时提供init和update两个方法，在使用时你只需要提供其中的一个也可以。
下面我们就介绍一下这两个函数。

（1）、update

当你所绑定的组件的值改变时，会自动调用update回调函数，并且传递一下的参数：

  （a）、element：被绑定的DOM element

  （b）、valueAccessor：这是一个JavaScript函数，在这个函数中你可以得到你所绑定的当前元素的属性的值。

  （c）、allBindingsAccessor：通过此JavaScript函数，我们可以得到绑定到此DOM element上的所有属性的值。

  （d）、viewModel：将试图模型对象传递给ko.applyBindings。如果在一个嵌套的元素中使用的话，此参数代表的是当前的数据项，比如：在with:person中，此参数代表person。

  （e）、bindingContext：一个包含对这个元素可用的上下文的对象，这个对象中包含了一些特殊的属性，比如：$parent、$parents、$root等。

我们之前曾经使用visible来控制一个绑定是否显示，此时我们可以通过自定义绑定实现动态的效果，比如出现和消失时都采用滑动的效果，我们则可以这样定义自己的方法：

 1 ko.bindingHandlers.slideVisible = { 

 2     update: function(element, valueAccessor, allBindingsAccessor) { 

 3         // First get the latest data that we're bound to 

 4         var value = valueAccessor(), allBindings = allBindingsAccessor(); 

 5           

 6         // Next, whether or not the supplied model property is observable, get its current value 

 7         var valueUnwrapped = ko.utils.unwrapObservable(value);  

 8           

 9         // Grab some more data from another binding property 

10         var duration = allBindings.slideDuration || 400; // 400ms is default duration unless otherwise specified 

11           

12         // Now manipulate the DOM element 

13         if (valueUnwrapped == true)  

14             $(element).slideDown(duration); // Make the element visible 

15         else 

16             $(element).slideUp(duration);   // Make the element invisible 

17     } 

18 };

在这里我们使用了jQuery的slideDown和slideUp函数。
现在我们就可以使用自己的绑定功能了：

1 <div data-bind="slideVisible: giftWrap, slideDuration:600">You have selected the option</div> 

2 <label><input type="checkbox" data-bind="checked: giftWrap" /> Gift wrap</label> 

3   

4 <script type="text/javascript"> 

5     var viewModel = { 

6         giftWrap: ko.observable(true) 

7     }; 

8     ko.applyBindings(viewModel); 

9 </script>

（2）、init
通过init函数我们可以在实例DOM元素的时候去做一些事情，我们经常在以下两种情况使用init函数：

（a）、为DOM elements设置初始状态。

（b）、注册事件处理程序，这样当用户点击绑定的DOM elements时就会触动对应的事件，我们也可以对其作出反映。

我们可以为上例增加一个init函数，当页面初次加载时我们可以控制是否显示组件：

1 ko.bindingHandlers.slideVisible = { 

2     init: function(element, valueAccessor) { 

3         var value = ko.utils.unwrapObservable(valueAccessor()); // Get the current value of the current property we're bound to 

4         $(element).toggle(value); // jQuery will hide/show the element depending on whether "value" or true or false 

5     }, 

6     update: function(element, valueAccessor, allBindingsAccessor) { 

7         // Leave as before 

8     } 

9 };

二、在DOM事件后修改可见值。
前面我们已经介绍了如何使用update，这样当一个DOM元素更新时我们可以作出对应的更新，但是我们怎么定义到某个具体的值呢，此时我们就可以使用如下的方法：

 1 ko.bindingHandlers.hasFocus = { 

 2     init: function(element, valueAccessor) { 

 3         $(element).focus(function() { 

 4             var value = valueAccessor(); 

 5             value(true); 

 6         }); 

 7         $(element).blur(function() { 

 8             var value = valueAccessor(); 

 9             value(false); 

10         });            

11     }, 

12     update: function(element, valueAccessor) { 

13         var value = valueAccessor(); 

14         if (ko.utils.unwrapObservable(value)) 

15             element.focus(); 

16         else

17             element.blur(); 

18     } 

19 };

此时我们就可以在UI进行使用了：

 1 <p>Name: <input data-bind="hasFocus: editingName" /></p> 

 2   

 3 <!-- Showing that we can both read and write the focus state --> 

 4 <div data-bind="visible: editingName">You're editing the name</div> 

 5 <button data-bind="enable: !editingName(), click:function() { editingName(true) }">Edit name</button> 

 6   

 7 <script type="text/javascript"> 

 8     var viewModel = { 

 9         editingName: ko.observable() 

10     }; 

11     ko.applyBindings(viewModel); 

12 </script>