问题描述
我正在使用knockout.js 在表单中添加和删除字段.到目前为止它工作正常,但是我需要一个日期选择器选项,所以我使用了 jQuery 的 UI 日期选择器.这有效,但仅适用于第一个日期选择器,而不适用于其他任何地方.所以每当我点击添加"时,我都会得到新的字段,但没有日期选择器.
I am playing with knockout.js to add and remove fields in a form. So far it works okay, however i need a datepicker option, so i used jQuery's UI datepicker. This works, but only on the very first datepicker, not anywhere else. So whenever i click 'Add' i get new fields, but no datepicker.
我用谷歌搜索并搜索了 StackExchange,但没有找到复制的解决方案字段.
I googled and seached StackExchange, but didn't find a solution on copying fields.
HTML
<table data-bind='visible: beschikkingen().length > 0'>
<thead>
<tr>
<th>Beschikkingsdatum</th>
<th>Beschikkingsnr</th>
<th />
</tr>
</thead>
<tbody data-bind='foreach: beschikkingen'>
<tr>
<td><input name="beschikkingsdatum[]" type="text" class="beschikkingsdatum" value="" data-bind='value: beschikkingsdatum, uniqueName: true' /> </td>
<td><input class='required number' data-bind='value: beschikkingsnummer, uniqueName: true' /></td>
<td><a href='#' data-bind='click: $root.removebeschikking'>Delete</a></td>
</tr>
</tbody>
</table>
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
});
});
推荐答案
使用自定义绑定处理程序可以解决您的问题:
Using a custom binding handler can solve your problem:
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 中:
<input data-bind='datepicker: beschikkingsdatum' />
这是工作小提琴:http://jsfiddle.net/QUxyy/
这篇关于带有 Knockout.js 的 jQuery UI 日期选择器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!