将可观察数组的切片绑定到不同的元素答案

【问题标题】：Bind slices of observable array to different elements将可观察数组的切片绑定到不同的元素
【发布时间】：2016-06-23 07:15:46
【问题描述】：

我有一个可淘汰的可观察数组，其中包含一些对象。现在每个对象都有一个名为 group 的属性。我想知道我们是否可以根据它们的组将此数组的项目绑定到不同的元素。

例如，一个可观察数组中有 5 个项目。在括号中，我展示了他们的组。

项目 1（组 1）
项目 2（组 1）
项目 3（组 2）
项目 4（组 2）
项目 5（组 3）

我们可以将所有 5 个项目绑定到一个表或 UL，但我想要的是能够拥有 3 个不同的表/UL，因为 3 个不同的组被标识为 group1、group2 和 group3。

所以，第一个表/UL 应该绑定 Item1 和 Item2。

第二个表/ul应该绑定Item3 & Item4。

第三个表/UL应该绑定Item5。

考虑到数组是动态填充的，因此我们无法保持固定数量的表/UL 元素进行绑定。

谢谢！

【问题讨论】：

标签： knockout.js

【解决方案1】：

假设您的商品如下所示：

var Item = function(name, group) {
  this.name = name;
  this.group = group;
}

它们在一个可观察的数组中：

var items = ko.observableArray([
  new Item("Item1", "group1"),
  new Item(/* ... */),
  /* et cetera */
]);

要创建一个包含所有按组排序的项目的对象，请创建一个计算对象：

var itemsByGroup = ko.computed(function() {
  return items().reduce(function(result, item) {
    if (!result[item.group]) {
      result[item.group] = [];
    }

    result[item.group].push(item);

    return result;
  }, {});
});

您需要创建一个计算出的二维数组以使用剔除foreach 绑定。

var itemGroups = ko.computed(function() {
  return Object.keys(itemGroups())
    .map(function(key) { return itemGroups()[key]});
});

现在，您可以使用 HTML 标记创建列表，如下所示：

<ul data-bind="foreach: itemGroups">
  <li>
    <ul data-bind="foreach: $data">
      <li data-bind="text: name"></li>
    </ul
  </li>
<ul>

如果要添加组标签等，可以返回具有label 属性的对象和items 数组中的项目。使用下面的小提琴进行实验：

var Item = function(name, group) {
  this.name = name;
  this.group = group;
}

var items = ko.observableArray([
  new Item("1", "A"),
  new Item("2", "A"),
  new Item("3", "B"),
  new Item("4", "C")
]);

var itemsByGroup = ko.computed(function() {
  return items().reduce(function(result, item) {
    if (!result[item.group]) {
      result[item.group] = [];
    }

    result[item.group].push(item);

    return result;
  }, {});
});

var groupedArray = ko.computed(function() {
  var grouped = itemsByGroup();
  return Object.keys(grouped)
    .map(function(key) {
      return grouped[key]
    });
});

ko.applyBindings({
  groupedArray: groupedArray
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<ul data-bind="foreach: groupedArray">
      <li>
        <ul data-bind="foreach: $data">
          <li data-bind="text: name"></li>
        </ul
      </li>
    <ul>

【讨论】：