5

私はこのテンプレート化されたノックアウトループを持っています:

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

なぜこれが機能しないのですか？

症状は次のとおりです。カレンダーが表示され、ウィジェットが対話に応答しますが、入力フィールドに日付が返されません。手がかりはありますか？

前もって感謝します！

4

1 に答える 1

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/

于 2015-04-17T15:50:58.290 に答える