Knockout应用开发指南之创建自定义绑定

 
 
 

  
  
  
ko.bindingHandlers.yourBindingName = { 
  
  
  
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
  
  
  
        // 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, allBindingsAccessor, viewModel) { 
  
  
  
        // This will be called once when the binding is first applied to an element, 
  
  
  
        // and again whenever the associated observable changes value. 
  
  
  
        // Update the DOM element based on the supplied values here. 
  
  
  
    } 
  
  
  
};
 
 
 

 
 
 

  
  
  
ko.bindingHandlers.slideVisible = { 
  
  
  
    update: function(element, valueAccessor, allBindingsAccessor) { 
  
  
  
        // First get the latest data that we're bound to 
  
  
  
        var value = valueAccessor(), allBindings = allBindingsAccessor();         
  
  
  

  
  
  
        // Next, whether or not the supplied model property is observable, get its current value 
  
  
  
        var valueUnwrapped = ko.utils.unwrapObservable(value); 
  
  
  

  
  
  
        // Grab some more data from another binding property 
  
  
  
        var duration = allBindings.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 
  
  
  
    } 
  
  
  
}; 
 
 
 

 
 
 

  
  
  
You have selected the option

当然，看来可能代码很多，但是一旦你创建了自定义绑定，你就可以在很多地方重用它。

init 回调

Knockout在DOM元素使用自定义绑定的时候会调用你的init函数。init有两个重要的用途：

◆ 为DOM元素设置初始值

◆ 注册事件句柄，例如当用户点击或者编辑DOM元素的时候，你可以改变相关的observable值的状态。

KO会传递和update回调函数一样的参数。

继续上面的例子，你可以像让slideVisible在页面***次显示的时候设置该元素的状态（但是不使用任何动画效果），而只是让动画在以后改变的时候再执行。你可以这样来做：

 
 
 

  
  
  
ko.bindingHandlers.slideVisible = { 
  
  
  
    init: function(element, valueAccessor) { 
  
  
  
        var value = ko.utils.unwrapObservable(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, allBindingsAccessor) { 
  
  
  
        // Leave as before 
  
  
  
    } 
  
  
  
};
 
 
 

这就是说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(); 
  
  
  
            value(true); 
  
  
  
        }); 
  
  
  

  
  
  
        $(element).blur(function () { 
  
  
  
            var value = valueAccessor(); 
  
  
  
            value(false); 
  
  
  
        }); 
  
  
  
    }, 
  
  
  

  
  
  
    update: function (element, valueAccessor) { 
  
  
  
        var value = valueAccessor(); 
  
  
  
        if (ko.utils.unwrapObservable(value)) 
  
  
  
            element.focus(); 
  
  
  
        else 
  
  
  
            element.blur(); 
  
  
  
    } 
  
  
  
};
 
 
 

现在你可以通过hasFocus绑定来读取或者写入这个observable值了：

 
 
 

  
  
  
Name: 
  
  
  

  
  
  
You're editing the name