Question

我正在尝试使用JQuery的datepicker与knockout一起使用bindingHandlers。当我单击文本框时，它会显示日期选择器。但基础模型没有更新。

==脚本

ko.bindingHandlers.dtp = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        allBindings = allBindingsAccessor();
        $(element).datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            onSelect: function (evntObj) {
                $(element).datepicker("hide");
                valueAccessor($(element).val());
            }

        });
    }
}
function Member(item) {
        var self = this;
        self.JoinDate = ko.observable(item.JoinDate);
}
 var viewmodel = function () {

        self = this;
        self.members = ko.observableArray([]);
 }
var moView = new viewmodel();
moView.push(new Member({JoinDate:"10-10-2010"}))
moView.push(new Member({JoinDate:"11-11-2011"}))
ko.applyBindings(moView);

== HTML

<table data-bind='foreach: members()'>
    <tr><td><input type="text" data-bind=" value: JoinDate, dtp:{}" /></td></tr>
</table>

http://jsfiddle.net/krishnasarma/fer146ap/

在jsfiddle

中进行模拟时似乎还有其他问题

Answer 1

我通过将new Member push次来电转移到您的viewmodel来解决您的JavaScript错误。

我还基于这里找到的一些代码实现了一个解决方案：knockout datepicker custom binding看起来就是你所追求的行为。

更新的绑定：

ko.bindingHandlers.dtp = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().dtpOptions || {};
        $(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");
        });

    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
        current = $(element).datepicker("getDate");

        if (value - current !== 0) {
            $(element).datepicker("setDate", value);   
        }
    }
};

我已相应更新了您的jsfiddle代码。此外，我总是喜欢在使用日期时使用Moment.js，但如果您认为合适，可以将其删除。

希望有所帮助！

淘汰赛中的datepicker绑定

1 个答案: