javascript - 带有动态 knockout 循环的 jQuerybUI datepicker()

Question

我有这个模板化的 knockout 循环:

<div id="accordion" data-bind="jqAccordion:{},template: {name: 'task-template',foreach: Tasks,afteradd: function(elem){$(elem).trigger('valueChanged');}}">.   </div> 

<script type="text/html" id="task-template">
     <div data-bind="attr: {'id': 'Task' + TaskId}" class="group">
          <h3><b><input name="TaskName" data-bind="value: TaskName  /></b></h3>
          <p>
             Due Date: <input class="datepicker" data-bind="myDatepicker : {}, value: taskDueDate" />
          </p>
     </div>
</script>

其中 datepicker 是一个 jQuery Ui datepicker 函数:

ko.bindinghandler.myDatepicker =  $(function() {
    init: function( element, valueAccessor) {

        $(element).datepicker({
           changeMonth: true,
           changeYear: true
        });
    }), 
    etc.
}

为什么这不起作用？

症状是:日历正在显示并且小部件响应我的交互但没有日期返回到输入字段。有什么线索吗？

提前致谢!

Answer 1

您需要将一些 viewModel 属性绑定(bind)到日期选择器绑定(bind)...您在这部分想得太多了。

但是当日期选择器更改元素的值时，您确实需要做一些特殊处理，否则它会搞乱 knockout 通常拦截更改的方式。

像这样设置绑定(bind)...

HTML:

<div id="accordion" data-bind="jqAccordion:{},template: {name: 'task-template',foreach: Tasks,afteradd: function(elem){$(elem).trigger('valueChanged');}}">.   </div> 

<script type="text/html" id="task-template">
     <div data-bind="attr: {'id': 'Task' + TaskId}" class="group">
          <h3><b><input name="TaskName" data-bind="value: TaskName  /></b></h3>
          <p>
             Due Date: <input class="datepicker" data-bind="myDatepicker : taskDueDate" />
          </p>
     </div>
</script>

处理程序是这样的:

ko.bindingHandlers.myDatepicker =  {
    init: function(element, valueAccessor) {
        var unwrappedObs = valueAccessor();
        $(element).val(ko.unwrap(unwrappedObs));
        $(element).datepicker({
           changeMonth: true,
           changeYear: true
        });
        ko.utils.registerEventHandler(element, "change", function () {
            var unwrappedObs = valueAccessor(),
            val = $(element).datepicker("getDate");
            unwrappedObs(val);
        });
    } 
};

这是一个 fiddle : http://jsfiddle.net/brettwgreen/nmb6c6gq/