带有Knockout.js的jQuery UI datepicker

我正在玩knockout.js来添加和删除表单中的字段。 到目前为止它工作正常，但我需要一个datepicker选项，所以我使用了jQuery的UI datepicker。 这有效，但仅限于第一个datepicker，而不是其他任何地方。 因此，每当我点击“添加”时，我会获得新字段，但没有日期选择器。

我用google搜索并连接了StackExchange ，但没有找到复制字段的解决方案。

HTML

 0'> 
 
 
Beschikkingsdatum
 
Beschikkingsnr
 
 
 
 
 
 
 
 
 
Delete
 
 
  

Knockout.JS

 var beschikkingModel = function(beschikkingen) { var self = this; self.beschikkingen = ko.observableArray(beschikkingen); self.addbeschikking = function() { self.beschikkingen.push({ beschikkingsdatum: "", beschikkingsnummer: "" }); }; self.removebeschikking = function(beschikking) { self.beschikkingen.remove(beschikking); }; self.save = function(form) { alert("Could now transmit to server: " + ko.utils.stringifyJson(self.beschikkingen)); // To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0], self.beschikkingen); }; }; var viewModel = new beschikkingModel([ { beschikkingsdatum: "", beschikkingsnummer: "" } ]); ko.applyBindings(viewModel); // Activate jQuery Validation $("form").validate({ submitHandler: viewModel.save }); //]]> 

日期选择器

 $(window).load(function(){ $('.beschikkingsdatum').datepicker({ dateFormat: 'dd-mm-yy', constrainInput: false }); }); 

Answer 1

使用自定义绑定处理程序可以解决您的问题：

 ko.bindingHandlers.datepicker = { init: function (element, valueAccessor, allBindingsAccessor) { var options = allBindingsAccessor().datepickerOptions || {}; $(element).datepicker(options); //handle the field changing ko.utils.registerEventHandler(element, "change", function () { var observable = valueAccessor(); observable($(element).datepicker("getDate")); }); //handle disposal (if KO removes by the template binding) ko.utils.domNodeDisposal.addDisposeCallback(element, function () { $(element).datepicker("destroy"); }); } }; 

在HTML中：

这是工作小提琴： http ： //jsfiddle.net/QUxyy/