Backbone.js 性能 - 将类添加到嵌套集合的第一个和最后一个模型答案

【问题标题】：Backbone.js Performance - Adding a class to first and last model of a nested collectionBackbone.js 性能 - 将类添加到嵌套集合的第一个和最后一个模型
【发布时间】：2012-09-29 17:21:13
【问题描述】：

我有一个包含约 100 种产品的列表，它们在一页上显示在一个长长的列表中。每个产品属于一个类别，我大约有 5 个类别。每个产品都有一个 category_id。

我想为一个类别的每个第一个产品添加一个“.first”类，并为一个类别的每个最后一个产品添加一个“.last”类。

性能是关键，我自己想出了一些解决方案，但写得非常糟糕而且太麻烦了。

示例数据：

products = {
   id: 1, category_id: 1;
   id: 2, category_id: 1;
   id: 3, category_id: 1;
   id: 4, category_id: 2;
   id: 5, category_id: 2;
   id: 6, category_id: 2;
   id: 7, category_id: 3;
   id: 8, category_id: 3;
   ...
}

我正在寻找的结果：

<ul>

  <li class='first' id='1'></li>
  <li id='2'></li>
  <li class='last' id='3'></li>

  <li class='first' id='4'></li>
  <li id='5'></li>
  <li class='last' id='6'></li>

  <li class='first' id='7'></li>
  <li id='8'></li>
  ...
</ul>

编辑：感谢@niemand 的帮助！我使用了 groupBy ，这就是我到目前为止所拥有的。在性能方面，这是解决此问题的好方法吗？

window.firsts = []
window.lasts = []
@grouped = _.groupBy(@collection.toJSON(), 'category_id')
_.each @grouped, (group) ->
  window.firsts.push new App.Models.Piece(_.first(group)).get('id')
  window.lasts.push new App.Models.Piece(_.last(group)).get('id')

这样我可以在渲染每个模型视图并应用正确的类时检查 window.firsts 或 window.lasts 是否包含当前模型的 ID。如果有更高效的方式来解决这个问题，我很想知道！

【问题讨论】：

你为什么不向我们展示你已经尝试过的东西？

标签： javascript performance backbone.js iteration

【解决方案1】：

使用Backbone.Collection.where({category_id: <category_id>}) 创建一个二维数组，其中包含按类别分组的模型。届时您将能够轻松找到所需的数据。

或者，如果您不介意类别中模型的顺序，那么只需Backbone.Collection.sortBy()，遍历集合并找到所有索引，其中 category_id 发生变化。

如果您有一个 category_id 列表并且它很小，那么第一种方法会更好。第二种更适合大量数据。

编辑：

有一个用于集合的下划线函数 groupBy()！所以你应该使用它：collection.groupBy(function(model) {return model.get('category_id');});

【讨论】：