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

2 backbone.js collections with same models but different sort orders

本文关键字：模型 排序 顺序 js backbone 集合 2个      更新时间：2023-09-26

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

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

  • 视图听取通常事件的集合
  • 视图检索在必须渲染时根据需要排序的模型的自定义列表

例如，

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/

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

您所要做的就是更改比较器函数。你的收藏中有这样做的方法，但基本的想法是

var mycollection = new Backbone.Collection();
mycollection.comparator = function(item) { return item.get('blah') }
相关文章：