관찰 가능한 배열의 KnockoutJS datetime picker

Question

knockout을 사용하여 페이지를 만들려고하는데 모델에 관찰 가능한 배열이 포함되어 있습니다. 각 배열 항목의 속성 중 하나는 날짜이며 jquery ui datepicker를 사용하려고합니다.

datepicker에 대한 custom bindingHandler의 예가 this question입니다. 그러나, 내 코드에서 사용하려고하면 변경 이벤트 처리기 동안 자바 스크립트 오류가 발생합니다.

내 간단한 코드 : 내 코드의 주석에서와 마찬가지로

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

을 이제 당신이 기능을 인 ko.observable을 다시 받아야 valueAccessor 사용하는 경우.