Question

我必须在同一页面上的两个不同位置显示相同的主干模型集合（一次在导航中，一次在主区域中），我需要保持集合中的模型同步但允许每个集合不同的排序。导航始终按字母顺序升序，但主要内容区域中的排序可由用户配置。最好的方法是什么？我是否应该有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来处理其他字段的排序。

与http://jsfiddle.net/nikoshr/Yu8y8/

一起玩的小提琴

Answer 2

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

Answer 3

您所要做的就是更改比较器功能。您的集合中有方法可以执行此操作，但基本思路是

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

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

3 个答案: