0

問題：

私はまだノックアウトJSを学んでいます。私のアプローチが間違っている場合は、私を導いてください。

これが私のフィドルです：http://jsfiddle.net/amitava82/wMH8J/25/

編集のクリック中に、ビューに表示される json モデルを受け取り、モデルから特定のアイテム (子配列) またはアクション (親配列) を削除したい (簡単にするために、フィドルから追加のアクションを追加するために UI の追加を削除しました）、最後にモデルをサーバーに戻します。

これで、ルート レベルからの削除は簡単になりました。ActionItems配列のActionParamatersである個々のアイテムを削除することに固執してい ます。

質問：

子配列から項目を削除するにはどうすればよいですか?

4

2 に答える 2

6

次のように、クリックされた actionItem とそれを含むアクション配列を deleteActionItem 関数に渡すことができます。

<!-- /ko -->
<a href="javascript:void(0)" data-bind="click: $root.deleteActionItem.bind($data, $parent)">remove item</a>

モデルでは、ko.mapping プラグインを使用してすべての actionItem 配列を監視可能にする必要があります (編集機能を参照)。

var viewModel = function() {
    var self = this;
    self.data = ko.observable();

    self.edit = function() {
       self.data ( ko.mapping.fromJS(editData) );
    }
    self.log = function() {
        console.log(self.data())
    }
    self.deleteAction = function(data) {
       //delete root node
       self.data().remove(data)
    }
    self.deleteActionItem = function(data,actionItem) {
        //delete items
        data.ActionItems.remove(actionItem);
    }
}

その後、deleteActionItem 関数で配列から項目を削除できます。配列が監視可能になったため、バインドされた dom 要素に結果が反映されます。

于 2012-07-09T19:45:49.377 に答える
1

サム、あなたのフィドル データは複雑すぎました。質問をするときは、フィドルを関連する要素に絞り込むと、助けが得られる可能性が高くなります。ネストされた配列と削除を説明する簡単なフィドルを作成しました。

これが HTML です。remove 関数は配列のコンテキスト内にあることに注意してください。したがって、$parent代わりにon の関数を呼び出します$root。これにより、ルートではなく、すぐ上のコンテキストをターゲットにすることができます。

<ul data-bind="foreach: editData">
    <li>
        <span data-bind="text: name"></span>
        <button data-bind="click: $parent.removeParent">Remove Parent</button>
        ...
            <!-- This line is on the child context -->
            <button data-bind="click: $parent.removeChild">Remove Child</button>

</ul>​

親モデルはこちら。ここでの削除関数は、子を削除するためのものであることに注意してください。関数が呼び出されると、removeChild子コンテキストから が要求され$parent、この remove が呼び出されます。

var Parent = function(name, children) {
    var self = this;
    self.name = ko.observable(name);
    self.children = ko.observableArray(children);
    self.removeChild = function(child) {
        self.children.remove(child);
    };
};

あなたのフィドルは、MVVM開発の重要な側面であるモデルも使用しません。ノックアウト サイトのチュートリアルを実行して、ノックアウト アプリケーションを構築する方法をよりよく理解することを検討してください。このような問題に対処するのに役立ちます。

于 2012-07-09T19:28:31.240 に答える