0

我有一个视图模型，其中包含我要绑定到的 2 个相关（主​​/详细）数组。

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

{ categoryID: 1, name: "Red Items" }其中 Category 是等数组

和 Item 是一个{ itemID: 1, categoryID: 1, name: "Red Widget" }等数组

我有几个类别，可能有几百个项目。我正在努力解决如何在我的视图模型中以一种可以枚举类别并获取相关项目或跨所有项目并获取类别的方式来表示这些。

在两个列表上维护重复信息似乎效率不高，而且我不想通过网络发送比需要更多的数据。

一种方法：创建 Item 和 Category 对象并修改原型以包含过滤（ko.computed）功能。category.Items()或者item.Category().Name，但鉴于我需要加载和保存数据，我不是 100% 如何在 knockout.js 中最好地完成此任务。

我不喜欢简单的 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;
}

从那里，您可以根据需要的类别绑定您的 viewModel。您甚至可以将它们设置为动态数组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 回答