將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" />