knockout.js - 将 DatePicker 与 Knockout 可观察数组一起使用

Question

使用 Editable Grid Example从 knockout ，并在 Steve Sanderson blog ，我试图让 DatePicker 或 datetimepicker 在可编辑网格中工作。我开始使用 Ryan Niemeyer 设置的日期选择器绑定(bind)。 ，但这不适用于可观察数组。

所以代码看起来像:

ko.bindingHandlers.datetimepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datetimepickerOptions || {};
        $(element).datetimepicker(options);

        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function() {
            var observable = valueAccessor();
            console.log("changing", observable);
            observable($(element).datetimepicker("getDate"));
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).datetimepicker("destroy");
        });

    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            current = $(element).datetimepicker("getDate");
        console.log("updating");
        if (value - current !== 0) {
            console.log("setting", value);
            $(element).datetimepicker("setDate", value); 
            console.log("just set", $(element).datetimepicker("getDate"));            
        }
    }
};

与绑定(bind):

<td><input class ="datetimeClass" style="width:130px" data-bind="datetimepicker: CPDateString, uniqueName: true" /></td> 

任何帮助或示例将不胜感激。我知道这与可观察数组中的每个项目本身都不是可观察的有关，但是对于 Javascript 来说是新手，我不知道如何修复它。

我收到一个错误:Change 事件中的“字符串不是函数”。如果我添加一些代码来尝试使该字段可观察，如下所示:

 $(initialData).each(function(gift) { 
    this.CPDateString = ko.observable(this.CPDateString); 
}); 

然后 datetimepicker 工作，并正确更新浏览器，但数据没有发布，所以它没有更新由以下人员发布的实际礼品数组:

var initialDataLocations = @Html.Raw(JsonConvert.SerializeObject(ViewBag.Locations));

var initialData = @Html.Raw(JsonConvert.SerializeObject(Model));

var viewModel = {
    availableLocations: ko.observableArray(initialDataLocations),
    gifts: ko.observableArray(initialData),
    save: function() {      
        ko.utils.postJson(location.href, { gifts: this.gifts })
        }
    };

提前致谢。

Answer 1

自定义绑定(bind)是使用小部件 UI 控件的强大工具。您只需要使用 datetimepicker 自定义绑定(bind)来使 textbox/input 成为日期时间选择器，并且 input 的值只需使用标准 ko 绑定(bind):

<td><input class ="datetimeClass" style="width:130px" data-bind="datetimepicker: {}, value:CPDateString, uniqueName: true" /></td> 

希望这会有所帮助
更新示例:
我写了一个非常简单的 datepicker 自定义绑定(bind)，如下所示:

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor) {
        var options = valueAccessor();
        $(element).datepicker(options || {});
    }
};

在 html 代码中只需使用自定义绑定(bind)，如下所示:

<input id="txtFromtDate" data-bind="datepicker:{}, value:lastUpdateFrom" type="text" />