Question

我有这个模板化的淘汰赛循环：

<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属性绑定到datepicker绑定...您正在过度思考该部分。

但是你确实需要对datepicker更改元素的值进行一些特殊的处理，因为否则会破坏淘汰通常会截获变化的方式。

像这样设置绑定......

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

这是一个小提琴： http://jsfiddle.net/brettwgreen/nmb6c6gq/

带动态knockout循环的jQuerybUI datepicker（）

1 个答案: