0

jquery-ui カスタム バインディングを使用して日付ピッカーをテキスト フィールドに追加すると、テンプレートを使用しない場合にのみモデルが更新されます。

問題の簡単な JSFiddle デモストレーション

HTML:

<script type="text/html" id="datepicker-template">
        <span data-bind="text: $data"></span>
        <input type="text" data-bind="jqueryui: {widget:'datepicker'}, value: $data">
</script>

<h2>Witout templates</h2>
<div>
    <span data-bind="text: from"></span>
    <input type="text" data-bind="jqueryui: {widget:'datepicker'}, value: from">
    <span data-bind="text: to"></span>
    <input type="text" data-bind="jqueryui: {widget:'datepicker'}, value: to">
</div>
<h2>With template<h2>
<div data-bind="template: {name:'datepicker-template', foreach: dates}"></div>

JavaScript:

$(function(){
    var ViewModel = function(){
        this.from = ko.observable("from");
        this.to = ko.observable("to");
        this.dates = ko.observableArray([this.from, this.to]);
    };

    var viewModel = new ViewModel();               
    ko.applyBindings(viewModel);
});​

非常に単純なものが欠けているように感じます。

4

1 に答える 1

0

実際、この問題は、jQueryUI バインディングを使用しない単純な例で再現可能です。問題は$data、ノックアウト テンプレート内のキーワードに関係しています。

テンプレート$data内の双方向バインディングには使用できないようです。コメントについては、この Google グループのスレッドを参照してください。

アイテムがある場合: ["one", "two", "three"] または [ko.observable("one"), ko.observable("two"), ko.observable("three")] foreach $data は生の値になり、その時点で KO はそれに書き戻す方法を知る方法がありません。値への読み取り/書き込みアクセスが必要な場合は、プロパティを持つオブジェクトを使用する必要があります。

したがって、この制限を回避する 1 つの方法は、日付オブジェクトの単純な ViewModel を作成することです。

var DateViewModel = function (initialValue) {
    this.value = ko.observable(initialValue);
};

次に、メインの ViewModel で次のように記述できます。

var ViewModel = function() {
    this.dates = ko.observableArray([
        new DateViewModel("from"),
        new DateViewModel("to")
    ]);
};

そして、テンプレートは次のようになります。

<script type="text/html" id="datepicker-template">
    <span data-bind="text: value"></span>
    <input type="text" data-bind="value: value">
</script>

例: http://jsfiddle.net/RjEnh/

于 2012-05-28T13:53:22.260 に答える