Question

我有一个视图模型，其中包含我想要绑定的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" }等

的数组

和Item是{ itemID: 1, categoryID: 1, name: "Red Widget" }等

的数组

我有几个类别，可能还有几百个项目。我正在努力学习如何在我的视图模型中表示这些，我可以枚举类别并获取相关项目或所有项目并获得类别。

在两个列表上维护重复信息似乎并不高效，而且我不希望通过网络发送超过需要的数据。

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

我不喜欢简单的JSON对象数组。假设我去了函数/原型路径，我如何加载和保存我的对象数组？

Answer 1

我认为您需要比数组更好的数据结构，因为 - 如您所说 - 保留重复信息并不是最佳选择。为什么不使用哈希表，或者我们只是在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)

我不确定这是否是你想要的，但我希望这种方法可以帮助你找到其他方法来提出你需要的东西。

枚举JSON主详细信息数组

1 个答案: