有些Jquery插件不能原生地支持KnockOutJS的双向…

有些Jquery插件不能原生地支持KnockOutJS的双向绑定，可以通过自定义双向绑定规则实现一些插件的双向绑定。

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.
    }
};

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.

}

};

For Example,

datepicker (http://amsul.ca/pickadate.js)插件是一个选择日期插件,比如我们选择开始日期和结束日期，就可以使用它来实现两个日期选择器，其中一个截止日期选择框（end_date）的日期要大于开始日期（start_date），end_date的的内容就需要根据start_date进行实时变化：

input data-bind="datePicker:start_date, value: start_date"
input data-bind="datePicker:end_date, value: end_date, min: start_date"

1 2	input data-bind="datePicker:start_date, value: start_date" input data-bind="datePicker:end_date, value: end_date, min: start_date"

可以通过以下代码绑定与变化联动, 当datePicker的属性min发生变化时，触发datepicker提供的方法修改min值

ko.bindingHandlers.datePicker.update = function (element, valueAccessor, allBindingsAccessor) {
              if (allBindingsAccessor().min && allBindingsAccessor().min()) {
                  var $input = $(element).pickadate();
                  var picker = $input.pickadate('picker');
                  var minDate = allBindingsAccessor().min()
                  picker.set("min", minDate);
              }
          };

ko.bindingHandlers.datePicker.update = function (element, valueAccessor, allBindingsAccessor) {

if (allBindingsAccessor().min && allBindingsAccessor().min()) {

var $input = $(element).pickadate();

var picker = $input.pickadate('picker');

var minDate = allBindingsAccessor().min()

picker.set("min", minDate);

}

};