12

これは、次の問題を示すjsFiddleです。

(観察可能な) 文字列のリストに対する foreach バインディングが与えられた場合、観察可能要素は、foreach 内でバインドされた入力タグへの変更から更新されないように見えます。期待するだろう。jsFiddle の例を次に示します。

HTML

<ul data-bind='foreach: list'>
    <li><input data-bind='value: $data'/></li>
</ul>

<ul data-bind='foreach: list'>
    <li><span data-bind='text: $data'></span></li>
</ul>

Javascript

​var vm = { list: [ko.observable('123'), ko.observable('456')] };
ko.applyBindings(vm);​

上記の例では、最初のリストの入力タグを更新すると、オブザーバブルが更新されることが予想されます。残念ながら、2 番目のリストが最初のリストに加えられた変更を反映していないことからわかるように、期待どおりに更新されません。

入力要素が変更されたときにリストが実際に更新されていないことを確認しました。興味深いことに、オブザーバブルに加えられた変更は両方のリストに反映されます (予想どおり)。つまり、vm.list[1]("444")両方のリストの 2 番目の要素を更新します。

私の記憶では、Knockout 2.0.0 にはこの問題はありませんでしたが、修正する必要があります。これが機能しない理由や期待される結果を達成する方法についての兆候を示すドキュメント、Google、またはノックアウト コードのコメントは見つかりませんでした。

これが期待どおりに機能しないのはなぜですか? また、データ構造を変更する必要のない回避策はありますか?

4

2 に答える 2

16

このjsFiddlevalue: $parent.list[$index()]に見られるように、を使用してこれを回避しました。新しいバインディングは次のようになります。

<ul data-bind='foreach: list'>
    <li>
        <input data-bind='value: $parent.list[$index()]' />
    </li>
</ul>

カスタムバインディングを使用して、これを改善できる可能性があります。

Knockout.jsについては、この関連するGitHubの問題＃708も参照してください。

Knockout 3.0のアップデート：

ノックアウトは現在以下を提供します$rawData：

<ul data-bind='foreach: list'>
    <li><input data-bind='value: $rawData'/></li>
</ul>

期待どおりに双方向バインディングを作成します。

バインディングコンテキストのドキュメントから：

$ rawData

これは、現在のコンテキストでの生のビューモデル値です。通常、これは$ dataと同じですが、Knockoutに提供されたビューモデルがオブザーバブルでラップされている場合、$ dataはラップされていないビューモデルになり、$rawDataはオブザーバブル自体になります。

于 2012-11-12T20:37:50.187 に答える
6

デフォルトのノックアウト バインディングで使用されるすべてのデータ オブジェクトは、常にアンラップされます。したがって、基本的には、期待どおりのオブザーバブルではなく、リスト内のアイテムの値にバインドしています。

オブザーバブルは、オブジェクト自体の代わりではなく、オブジェクトのプロパティである必要があります。これが起こらないように、オブザーバブルをオブジェクトのプロパティとして設定します。

​var vm = {
    list: [
        { value: ko.observable('123') },
        { value: ko.observable('456') }
    ]
};

<ul data-bind='foreach: list'>
    <li><input data-bind='value: value'/></li>
</ul>

<ul data-bind='foreach: list'>
    <li><span data-bind='text: value'></span></li>
</ul>
于 2012-11-12T19:59:31.867 に答える