有些Jquery插件不能原生地支持KnockOutJS的双向绑定,可以通过自定义双向绑定规则实现一些插件的双向绑定。
1 2 3 4 5 6 7 8 9 10 11 |
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进行实时变化:
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值
1 2 3 4 5 6 7 8 |
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); } }; |