排序集合Backbone.js

Question

我正在尝试学习Backbone.js并且在排序方面遇到了一些问题。

我的模型是一首歌，它具有“标题”，“分钟”，“秒”和“顺序”属性。

现在，我只是将每首歌曲添加到我的视图中，将它们作为列表元素添加到无序列表中。 我的功能看起来像这样：

$('#oList', this.el).append("<li id = 'song' > Song Name: " + song.get('title') + " Minutes: " + song.get('minutes') + " Seconds" + song.get('seconds') + "</li>");

它们也会在追加之前添加到集合中。

我希望能够根据标题（按字母顺序）和歌曲长度（数字，基于分钟和秒的总和）进行排序。

有没有简单的方法来做到这一点？ 我已经阅读了Backbone中的sort（）函数以及比较器，但我仍然没有看到我应该做的事情。 主要是，我的所有元素将如何添加回我的视图？ 当我想按标题排序时，我是否必须清除HTML中的列表并以某种方式重新添加每个元素？

任何方向都非常感谢。

Answer 1

定义比较器时，Backbone使用Underscores sort和sortBy方法在添加模型时对集合进行排序。 Comparator是Collection上的一个属性集，可以是一个字符串（它将是sortBy使用的数据中的属性名称 - http://underscorejs.org/#sortBy ）或函数。

这是一个基本的例子：

var Song = Backbone.Model.extend(),
    SongCollection = Backbone.Collection.extend({ model: Song, comparator: 'length' }),
    songCollection, song1, song2, song3;

song1 = new Song({ name: 'song1', length: 120 });
song2 = new Song({ name: 'song2', length: 90 });
song3 = new Song({ name: 'song3', length: 100 });

songCollection = new SongCollection();
songCollection.add([song1, song2, song3]);

现在，如果您检查songCollection，您将看到模型按长度从最短到最长（song2，song3，song1）排序，即使这不是它们被添加到集合中的顺序。

请注意，您不需要先制作所有模型，然后一次性添加所有模型。 只要您添加新模型，该集合就会自动排序。

该集合将在重新排序时触发“排序”事件。 您可以收听此活动以了解何时更新/重绘您的视图。

Answer 2

收藏 - >比较，排序

查看 - >事件'sort' - >渲染整个集合或只更新el在DOM中的位置（使用集合中的新模型索引）。 由你决定。 首先是更简单但第二个应该更快，以防你有大量的数据。