可觀察數組中的KnockoutJS datetime選擇器

Question

我想用knockout創建一個頁面，該模型包含一個可觀察數組。每個數組項中的其中一個屬性是日期，我正在嘗試使用jquery ui datepicker。

我在this question找到了一個datepicker的自定義bindingHandler的例子。但是，當我嘗試在我的代碼中使用它時，在更改事件處理程序期間出現javascript錯誤。

我的簡化代碼：

<table> 
    <thead> 
     <tr> 
      <th>My Date</th> 
     </tr> 
    </thead> 
    <tbody data-bind='foreach: visits'> 
     <tr> 
      <td><input data-bind='datepicker: MyDate' /></td> 
     </tr> 
    </tbody> 
</table> 

<script type="text/javascript"> 
    ko.bindingHandlers.datepicker = { 
     init: function(element, valueAccessor, allBindingsAccessor) { 
      $(element).datepicker({ dateFormat: 'dd/mm/yy' }); 

      //handle the field changing 
      ko.utils.registerEventHandler(element, "change", function() { 
       //get the value accessor 
       var observable = valueAccessor(); 

       //assign the observable value - code breaks here with 'Function expected' 
       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()); 

      //handle date data coming via json from Microsoft 
      if (String(value).indexOf('/Date(') == 0) { 
       value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1"))); 
      } 

      var current = $(element).datepicker("getDate"); 

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

    var VisitModel = function(visits) { 
     var self = this; 
     self.visits = ko.observableArray(visits); 

     self.getVisitsJSON = function() { 
      return ko.utils.stringifyJson(self.visits); 
     } 
    }; 

    var visitModel = new VisitModel([{"MyDate":"01/01/2013"}]); 
    ko.applyBindings(visitModel); 
</script> 

正如我在代碼中的註釋，我得到一個錯誤說「功能有望」當我打電話observable($(element).datepicker("getDate"));。我對knockoutjs相當陌生，我不確定爲什麼我得到這個錯誤，誰能幫忙解釋一下？

Answer 1

您需要將數組內容包裝到具有可觀察屬性的自己的視圖模型中。像這樣的東西可能會奏效：

var VisitModel = function(visits) { 
    var self = this; 
    self.visits = ko.observableArray(); 

    for (var i = 0; i < visits.length; i++) { 
     self.visits.push(new DateModel(visits[i]); 
    } 

    self.getVisitsJSON = function() { 
     return ko.utils.stringifyJson(self.visits); 
    } 
}; 

var DateModel = function(date) { 
    var self = this; 
    self.MyDate = ko.observable(date.MyDate); 
} 

var visitModel = new VisitModel([{"MyDate":"01/01/2013"}]); 
ko.applyBindings(visitModel); 

現在，當您使用valueAccessor你應當得到的ko.observable這是一個功能。