排序集合 Backbone.js答案

【问题标题】：Sorting Collections Backbone.js排序集合 Backbone.js
【发布时间】：2023-03-10 18:30:01
【问题描述】：

我正在尝试学习 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 中的列表并以某种方式重新添加每个元素？

非常感谢任何方向。

【问题讨论】：

标签： javascript jquery sorting backbone.js

【解决方案1】：

当您定义比较器时，Backbone 使用下划线排序和 sortBy 方法在您添加模型时保持您的集合排序。 Comparator 是集合上的一个属性集，可以是字符串（这将是 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）排序，即使这不是它们添加到集合中的顺序。

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

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

【讨论】：

好的，这是有道理的。我已将比较器设置为标题，但我的有序列表保持相同的顺序（附加它们的顺序）。我错过了什么？
集合是否正确排序？您的视图代码如何呈现数据？如果您希望它更新，您需要侦听排序事件并重绘视图。一个快速的谷歌搜索给我这些看起来他们可以帮助你的链接：stackoverflow.com/questions/18001349/…liquidmedia.org/blog/2011/02/backbone-js-part-3如果你需要更多的建议，请发布你的查看代码
这是一个小提琴：jsfiddle.net/3RGRv 正如您在添加歌曲时看到的那样，视图没有排序。
1) 把 this.collection.bind('add'...) 改成 this.collection.bind('sort', this.render); 2) 添加 $('#oList').empty();在渲染功能的开头。基本上，如果您希望列表更新，您可以使用排序后的集合重绘它。如果您只是附加一个新的列表项，它将始终位于底部。更新小提琴：jsfiddle.net/3RGRv/1
非常感谢@mcbex，这很有帮助。如果您碰巧知道还有一个问题：我希望能够根据下拉菜单的输入进行排序。我正在监听它的值的变化，但是我将如何将比较器设置为该值并重新渲染？还是我应该做点别的？我目前的尝试是： $(document).ready(function(){ $('#sortBy').change(function() { this.collection.comparator = $('#sortBy').val(); alert( "这工作"); }); });其中#sortBy 是选择表单，它不起作用。

【解决方案2】：

集合 -> 比较器，排序

View -> event 'sort' -> 渲染整个集合或者只是更新 el 在 DOM 中的位置（使用集合中的新模型索引）。由你决定。第一个更简单，但如果您有大量数据，第二个应该会更快。

【讨论】：

您能否对第一种方法进行更多解释（或提供链接）？如定义比较器（比较器：'title'？）然后调用排序函数？我只有几行数据。