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

在写这篇文章之前，xxx经已写过了几篇关于改绑定函数主题的文章,想要了解的朋友可以去翻一下之前的文章

    在应用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>

 

 

 

文章结束给大家分享下程序员的一些笑话语录： 马云喜欢把自己包装成教主，张朝阳喜欢把自己包装成明星，李彦宏喜欢把自己包装成的很知性，丁磊喜欢把自己包装的有创意，李开复总摆出一副叫兽的样子。看来的。其实我想说，缺啥补啥，人之常情。