datepicker binding в нокауте

Question

Я пытаюсь использовать datepicker JQuery в сочетании с нокаутом с использованием bindHandlers. Когда я нажимаю на текстовые поля, он показывает дату. но базовая модель не обновляется.

== Script

ko.bindingHandlers.dtp = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     allBindings = allBindingsAccessor(); 
     $(element).datepicker({ 
      dateFormat: 'dd-mm-yy', 
      changeMonth: true, 
      changeYear: true, 
      onSelect: function (evntObj) { 
       $(element).datepicker("hide"); 
       valueAccessor($(element).val()); 
      } 

     }); 
    } 
} 
function Member(item) { 
     var self = this; 
     self.JoinDate = ko.observable(item.JoinDate); 
} 
var viewmodel = function() { 

     self = this; 
     self.members = ko.observableArray([]); 
} 
var moView = new viewmodel(); 
moView.push(new Member({JoinDate:"10-10-2010"})) 
moView.push(new Member({JoinDate:"11-11-2011"})) 
ko.applyBindings(moView); 

== HTML

<table data-bind='foreach: members()'> 
    <tr><td><input type="text" data-bind=" value: JoinDate, dtp:{}" /></td></tr> 
</table> 

http://jsfiddle.net/krishnasarma/fer146ap/

Там, как представляется, другие проблемы выскакивают при моделировании в jsfiddle

Answer 1

Я исправил свои ошибки JavaScript на перемещение new Memberpush звонит в ваш viewmodel.

Я также внедрил решение, основанное на некотором кодексе, найденном здесь: knockout datepicker custom binding, который выглядит как поведение, которым вы пользуетесь.

Обновленное связывания:

ko.bindingHandlers.dtp = { 
    init: function(element, valueAccessor, allBindingsAccessor) { 
     //initialize datepicker with some optional options 
     var options = allBindingsAccessor().dtpOptions || {}; 
     $(element).datepicker(options); 

     //handle the field changing 
     ko.utils.registerEventHandler(element, "change", function() { 
      var observable = valueAccessor(); 
      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()), 
     current = $(element).datepicker("getDate"); 

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

Я обновил свой jsfiddle код соответственно. Также мне всегда нравится использовать Moment.js при работе с датами, однако вы можете удалить это, если хотите.

Надеюсь, что это поможет!