可观察数组中的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这是一个功能。