0

最初: 私はノックアウト js を初めて使用し、ノックアウト/mvvm の考え方に頭を悩ませようとしています。

私が持っているのは次のケースです: 選択したチケット オブジェクトの observableArray を含むノックアウト ビューモデルがあります。この配列は、より大きなチケット セットのユーザー定義の選択/サブセットを表します。チケットのセット全体が jqgrid テーブルにリストされ、各行には、各チケットが選択されているかどうかを示すチェックボックスがあります。これは、「selectedTickets」配列が変更されるたびに、チェックボックスの値を更新する必要があることを意味します。これに加えて、ユーザーが各チェックボックスをクリックして、選択からチケットを追加/削除できるようにしたいと考えています。かなり受け入れられる機能のように思えますよね？

ただし、これを達成するためにノックアウト「チェック済み」バインディングを使用する方法を理解するのに苦労しています。私の最初のアイデアは、selectedTickets 配列の変更を反映し、チケットが selectedTickets 配列にあるかどうかに基づいて true または false を返す、「isSelected」と呼ばれるビューモデル オブジェクトで計算された依存オブザーバブルを使用することでした。ここでの最初の問題は、計算されたオブザーバブルにパラメーターを渡して、検索するチケット ID を指定する必要があることです。これは、書き込み可能な計算されたオブザーバブルでのみ機能することがわかります。ただし、チェックボックスの状態を取得することは書き込み操作のようには見えないため、すでに何かの匂いがし始めています。次の問題は、バインディングが双方向である必要があることです。ユーザーが各チェックボックスの状態を変更できるようにし、それに応じて selectedTickets 配列を更新できるようにしたかったためです。これは、selectedTickets 配列に対してチケットを実際に削除/追加するため、別の操作です。チェックボックスの状態を設定しようとして、計算されたオブザーバブルが再びトリガーされます。この 2 つのユース ケースは、この方法で実行しようとすると、無限ループのように終わる可能性があるようです。チェックボックスのチェック済みバインディングを使用するだけで、これら 2 つの使用例を組み合わせる良い方法が見つかりませんでした。

もちろん、チェックボックスの変更されたイベントとノックアウト ビューモデルの selectedTickets 配列にリスナーを接続することで、チェックボックスのイベント処理を手動で行うこともできますが、ノックアウト バインディングを使用してこれをより自動化できることを望んでいました。

私はこれで道を外れたと感じているので、私を良い道に導くことができるノックアウトマスターがそこにいることを願っています.

4

1 に答える 1

6

knockout.js を使用する場合、作業を半分ずつ停止する必要があります。項目のリストがある場合、データは (選択した項目だけでなく) ビューモデルに属し、外観のみがビューによって定義されます。

したがって、プロパティを持つitemstypeのオブザーバブル配列をお勧めします。選択されたアイテムは、計算されたオブザーバブルを介してアクセス可能になります。ItemisSelected

var Item = function(name) {
    this.name = ko.observable(name);
    this.isSelected = ko.observable(false);
};

var ViewModel = function() {
    var self = this;

    self.items = ko.observableArray([
        new Item('Foo'), new Item('Bar'), new Item('Foo Bar')
    ]);

    self.selectedItems = ko.computed(function() {
        return ko.utils.arrayFilter(self.items(), function(item) {
            return item.isSelected();
        });
    });
};

http://jsfiddle.net/htZfX/

于 2012-06-13T10:05:07.897 に答える