在 Ember 中拆分和分组项目集合答案

【问题标题】：Split and group a collection of items in Ember在 Ember 中拆分和分组项目集合
【发布时间】：2015-06-20 21:15:05
【问题描述】：

我正在尝试在 Ember 中收集记录并将它们分成若干组，例如 2。

例如，像

这样的东西

{{#each node in model}}
  <span>node.name</span>
{{/each}}

我收到<span>thing</span><span>other thing</span><span>some thing</span><span>one more thing</span>

我希望能够将节点传递给某物并用 div 包装每 2 个节点类似<div><span>thing</span><span>other thing</span></div><div><span>some thing</span><span>one more thing</span></div>

在 Ember 2.0 中，大多数东西都应该是一个组件，哪里是处理这个逻辑的最佳位置。应该是组件还是控制器？

【问题讨论】：

标签： javascript ember.js ember-cli

【解决方案1】：

考虑到与展示相关的东西，或为此做的准备，属于组件的原则，我更喜欢组件。你可以这样做：

partitions: computedPartition('model', 2)

然后在你的模板中

{{#each partition in partitions}}
  <div>
    {{#each node in partition}}
      {{node.name}}
    {{/each}}
  </div>
{{/each}}

现在剩下的就是写computedPartition，这是一个 Ember 计算属性：

function computedPartition(dependentKey, size) {
  return Ember.computed(dependentKey + ".@each", function() {
    return partition(this.get(dependentKey), size);
  });
}

有不同的分区算法。见this question。这是一个简短的递归：

function partition(array, n) {
  array = array.slice();
  return function _partition() {
    return array.length ? [array.splice(0, n)].concat(_partition()) : [];
  }();
}

更深入

我们可以通过引入一个名为computedArrayInvoke 的更高级别的计算属性来简化（？）上面的内容，它使用指定的键以及其他参数调用数组值属性上的指定函数：

function computedArrayInvoke(fn, dependentKey, ...args) {
  return Ember.computed(dependentKey + ".@each", function() {
    return fn(this.get(dependentKey), ...args);
  });
}

现在我们可以写了

partitions: computedArrayInvoke(partition, 'model', 2)

【讨论】：