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

Question

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

Answer 1

我通常认为不应更改集合以表示 transient 重新排序，因此:

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

例如，

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'}
]);

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

一个可以玩的 fiddle http://jsfiddle.net/nikoshr/Yu8y8/