javascript - 对集合进行排序 Backbone.js

Question

我正在尝试学习 Backbone.js，但在排序方面遇到了一些困难。

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

现在，我只需将每首歌曲添加到我的 View 中，方法是将它们作为列表元素添加到无序列表中。我的函数如下所示:

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

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

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

有什么简单的方法可以做到这一点吗？我已经阅读了 Backbone 中的 sort() 函数以及比较器，但我仍然没有看到我应该做什么。主要是，如何将我的所有元素添加回我的 View 中？当我想按标题排序时，是否必须清除 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)，即使这不是它们添加到集合中的顺序。

注意，您不需要先制作所有模型，然后一次性添加它们。每当您添加新模型时，该集合都会自动排序。

每当重新排序时，集合都会触发“排序”事件。您可以监听此事件以了解何时更新/重绘您的 View 。