将DatePicker与Knockout可观察数组结合使用

Question

使用来自Knockout的Editable Grid Example并绑定到Steve Sanderson blog，我试图让DatePicker或datetimepicker在可编辑网格中工作。我通过使用由Ryan Niemeyer设置的datepicker绑定开始，但这对于可观察数组无效。

因此，代码看起来像：

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"));    
     } 
    } 
}; 

与绑定：

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

任何帮助或例子将不胜感激。我知道这与observablearray中的每个项目有关，但它本身并不是可观察的，但对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

自定义绑定是使用小部件UI控件的强大工具。你只需要使用的DateTimePicker自定义绑定，使文本框/输入变为一个日期选择器和输入的值用标准的KO结合：

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

希望这将有助于

更新例如：

我写了一个很简单的日期选择器自定义绑定如下：

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

而在HTML代码，使用自定义绑定，如下所示：

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