javascript - 2 个具有相同模型但排序顺序不同的主干.js 集合

Question

我必须在同一页面上的 2 个不同位置显示相同的主干模型集合（一次在导航中，一次在主区域），并且我需要保持集合中的模型同步但允许对每个集合进行排序不同。导航始终按字母升序排列，但主内容区域中的排序可由用户配置。最好的方法是什么？我是否应该有 2 个不同的集合和事件绑定来尝试确保它们的模型始终相同（使用添加/删除/重置事件）？我应该只有 1 个集合并根据需要动态更改它的排序顺序吗？

Answer 1

我通常认为不应该改变集合来表示暂时的重新排序，所以：

• 视图监听通常事件的集合，
• 视图在必须呈现时检索根据需要排序的自定义模型列表。

例如，

var C = Backbone.Collection.extend({
    comparator: function (model) {
        return model.get('name');
    },

    toJSON_sorted: function (reversed) {
        var models = this.toJSON();
        return (!reversed) ? models : models.reverse();
    }
});

var V = Backbone.View.extend({
    initialize: function () {
        this.collection.on('reset', this.render, this);
        this.collection.on('change', this.render, this);
        this.collection.on('add', this.render, this);
        this.collection.on('delete', this.render, this);
    }
});
var NavView = V.extend({
    render : function () {
        console.log(this.collection.toJSON());
    }
});
var MainView = V.extend({
    render : function () {
        var data = this.collection.toJSON_sorted(this.reversed);
        console.log(data);
    }
});

调用这些定义

var c=new C();
var v1 = new NavView({collection:c});
var v2 = new MainView({collection:c});
v2.reversed=true;

c.reset([
    {name:'Z'},
    {name:'A'},
    {name:'E'}
]);

以预期的顺序为视图提供模型，并允许您随意更改排序方向。您还可以定制toJSON_sorted以处理其他字段的排序。

A Fiddle to play with http://jsfiddle.net/nikoshr/Yu8y8/

Answer 2

如果集合包含完全相同的东西，我认为保留 1 个集合并将其用于两个显示是最整洁的。只需在渲染所需的任何可视组件之前调用 sort 函数。

Answer 3

您所要做的就是更改比较器功能。您的收藏有方法可以做到这一点，但基本思想是

var mycollection = new Backbone.Collection();
mycollection.comparator = function(item) { return item.get('blah') }