2

行ごとの編集を実装するために、foreach 内で目に見えるノックアウト バインディングとインデックスを使用しようとしています。これは、各行の表示および変更 div を作成し、それらの間で選択するために可視バインディングを使用することによって行われます。問題は、オブザーバブルが変更と表示の div の間を追跡しないことです。

このフィドルを作成しましたhttp://jsfiddle.net/rscidmore/YrsCj/57/

問題を確認するには、行の [変更] をクリックし、値を編集して [保存] をクリックします。同じオブザーバブルに対して 2 つの値があることがわかります。

Javascript:
var myViewModel = {
    vals: ko.observableArray([
        {label: 'first',  item: 'one'},
        {label: 'second', item: 'two'},
        {label: 'third',  item: 'three'}
    ]),
    idx: ko.observable(-1)
};

ko.applyBindings(myViewModel);



HTML:
<body class='ui-widget'>
<div class='container'>
   <!-- ko foreach: vals -->
     <div class='label' data-bind="visible: $root.idx() == $index()">
       <span class='lbl' data-bind="text: label"></span>:
       <input type='text' data-bind="value: item">
       <input type='button' value="save" data-bind="click: function()
         { $root.idx(-1);}" />
     </div>
     <div class='label' data-bind="visible: $root.idx() != $index()">
       <span class='lbl' data-bind="text: label"></span>:
       <span data-bind="text: item"></span>
       <input type='button' value="modify" data-bind="click: function()
         { $root.idx($index());}" />
     </div>
   <!-- /ko -->
</div>
</body>
4

1 に答える 1

3

のみがアイテムのko.observableArray追加と削除を追跡し、そのアイテムが変更された場合は追跡しません。

ドキュメントの作成:

キーポイント: observableArray は、オブジェクトの状態ではなく、配列内にあるオブジェクトを追跡します

したがって、アイテムの変更を追跡するには、アイテムに監視可能なプロパティが必要です。

vals: ko.observableArray([
        {label: 'first',  item: ko.observable('one')}, 
        {label: 'second', item: ko.observable('two')}, 
        {label: 'third',  item: ko.observable('three')}
    ]),

デモフィドル。

于 2012-11-24T07:29:40.407 に答える