0

バインドする 2 つの関連 (マスター/詳細) 配列を含むビュー モデルがあります。

  var ViewModel = function (data) {
        var self = this;
        self.CategoryList = ko.observableArray(data.CategoryList);
        self.ItemList = ko.observableArray(data.ItemList);
   }

Category は{ categoryID: 1, name: "Red Items" }etcの配列です

Item は{ itemID: 1, categoryID: 1, name: "Red Widget" }etcの配列です

いくつかのカテゴリと、おそらく数百のアイテムがあります。カテゴリを列挙して関連するアイテムにアクセスしたり、すべてのアイテムに渡ってカテゴリにアクセスしたりできるように、ビュー モデルでこれらを表現する方法に苦労しています。

両方のリストで重複した情報を維持するのは効率的ではないようです。必要以上のデータをネットワーク経由で送信したくありません。

1 つのアプローチ: Item オブジェクトと Category オブジェクトを作成し、プロトタイプを変更してフィルタリング (ko.computed) 関数を含めます。category.Items()またはitem.Category().Name、データを読み込んで保存する必要があるため、knockout.js 内でこれを最もよく達成する方法を 100% 知っているわけではありません。

私は単純な JSON オブジェクトの配列には慣れていません。関数/プロトタイプ ルートに進むと仮定すると、オブジェクトの配列をどのようにロードおよび保存できますか?

4

1 に答える 1

0

あなたが言ったように、重複した情報を保持することは最適ではないため、配列よりも優れたデータ構造が必要だと思います。カテゴリを一覧表示する配列を使用する代わりに、ハッシュ テーブルを使用しないのはなぜですか。JavaScript で単に知っているように、オブジェクトを使用しないでください。

{
    1: "Red Items",
    2: "Blue Items",
    3: "Green Items",
    4: "Yellow Items",
}

(簡単な方法で配列からハッシュを作成できます)

var createHashFromArray = function(arr) {
  var hash = {}
  for (var i = 0, var len = arr.length; i < len; i++)
    hash[i] = arr[i];
  return hash;
}

そこから、必要なカテゴリに従ってビューモデルをバインドできます。ko.computedビューでそれらを整理するために、を使用してそれらを動的配列として設定することもできます。

<div data-bind="foreach: redItemsOnly">
  <span data-bind="text: itemId">ID</span>
  <span data-bind="text: name">NAME</span>
</div>

そしてあなたのJavaScriptで...

self.redItemsOnly = ko.computed(function() {
return ko.utils.arrayFilter(self.ItemList(), function(item) 
{
    return self.CategoryHash[item.categoryID] === "Red Items"
});
}, self)

これがあなたの望むものかどうかはわかりませんが、このアプローチが、必要なものを思いつくための他の方法を見つけるのに役立つことを願っています.

于 2013-01-04T20:06:28.000 に答える