jQuery UI datepicker with Knockout.js

Question

我正在玩knockout.js來添加和刪除表單中的字段。到目前爲止它工作正常，但是我需要一個datepicker選項，所以我用jQuery的UI日期選擇器。這是有效的，但僅限於第一個日期選擇器，而不是其他地方。所以每當我點擊'添加'我得到新的領域，但沒有日期選擇器。

我使用Google搜索並搜索到StackExchange，但沒有找到複製字段的解決方案。

HTML

<table data-bind='visible: beschikkingen().length > 0'> 
      <thead> 
       <tr> 
        <th>Beschikkingsdatum</th> 
        <th>Beschikkingsnr</th> 
        <th /> 
       </tr> 
      </thead> 
      <tbody data-bind='foreach: beschikkingen'> 
       <tr> 
        <td><input name="beschikkingsdatum[]" type="text" class="beschikkingsdatum" value="" data-bind='value: beschikkingsdatum, uniqueName: true' /> </td> 
        <td><input class='required number' data-bind='value: beschikkingsnummer, uniqueName: true' /></td> 
        <td><a href='#' data-bind='click: $root.removebeschikking'>Delete</a></td> 
       </tr> 
      </tbody> 
     </table> 

Knockout.JS

var beschikkingModel = function(beschikkingen) { 
    var self = this; 
    self.beschikkingen = ko.observableArray(beschikkingen); 

    self.addbeschikking = function() { 
     self.beschikkingen.push({ 
      beschikkingsdatum: "", 
      beschikkingsnummer: "" 
     }); 
    }; 

    self.removebeschikking = function(beschikking) { 
     self.beschikkingen.remove(beschikking); 
    }; 

    self.save = function(form) { 
     alert("Could now transmit to server: " + ko.utils.stringifyJson(self.beschikkingen)); 
     // To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0], self.beschikkingen); 
    }; 
}; 

var viewModel = new beschikkingModel([ 
    { 
     beschikkingsdatum: "", 
     beschikkingsnummer: "" 
    } 
]); 
ko.applyBindings(viewModel); 

// Activate jQuery Validation 
$("form").validate({ submitHandler: viewModel.save }); 
//]]> 

日期選擇器

$(window).load(function(){ 
$('.beschikkingsdatum').datepicker({ 
    dateFormat: 'dd-mm-yy', 
    constrainInput: false 
}); 
}); 

Answer 1

使用自定義綁定處理CA ñ解決您的問題：

ko.bindingHandlers.datepicker = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     var options = allBindingsAccessor().datepickerOptions || {}; 
     $(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"); 
     }); 
    } 
}; 

而在HTML：

<input data-bind='datepicker: beschikkingsdatum' /> 

這裏是工作提琴：http://jsfiddle.net/QUxyy/