带有动态淘汰循环的 jQuerybUI datepicker()答案

【问题标题】：jQuerybUI datepicker() with dynamic knockout loop带有动态淘汰循环的 jQuerybUI datepicker()
【发布时间】：2013-09-26 18:25:18
【问题描述】：

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

<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.
}

为什么这不起作用？

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

提前谢谢你！

【问题讨论】：

你检查过这个databicker bindinghandler 实现了吗？ stackoverflow.com/questions/6612705/…
感谢 nemesv，这是一个有价值的链接！ :) 仍然没有让它工作。我可能在这里炫耀我缺乏理解：一定有一些我不太了解的东西......单击日期选择器时，我在控制台中收到一条错误消息：“未捕获的异常：缺少此日期选择器的实例数据”。 ..
@AsleG 对此还有什么好运气吗？我在上一条评论中遇到了同样的问题，并且设置与您在问题中描述的类似。
@Justin 我切换到 datetimepicker 一个我找到的插件。它不能 100% 工作，但我的错误消息已经消失。我已经把它放在一边，专注于我正在努力解决的其他一些问题，但最终会再次投入其中。 :)

标签： javascript jquery knockout.js datepicker

【解决方案1】：

您需要将一些 viewModel 属性绑定到 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/

【讨论】：