backbone.js:更新模型,重新排序和重新渲染模型集合

Question

在我的应用程序中,我有一个socket.io连接,它正在监听后端并获取客户端浏览器所持有的模型的更新(它通过id检索模型并调用set模型属性).

我希望对集合进行排序,然后作为一个整体重新渲染,以反映模型上的任何新排序set(大多数示例似乎是围绕单个视图重新渲染).实现这一目标的方法是什么？

NB我有一个backbone.js布局从示例todo应用程序(这是第一个骨干应用程序)逐字逐句提升.

Answer 1

您可以通过提供comparator收集方法来实现您想要的效果.

例:

ModelCollection = Backbone.Collection.extend({
    comparator: function(a, b) {
        if ( a.get("name") > b.get("name") ) return 1;
        if ( a.get("name") < b.get("name") ) return -1;
        if ( a.get("name") === b.get("name") ) return 0;
    },

    initialize: function() {
        this.on('change:name', function() { this.sort() }, this);
    }
});

在comparator这个例子将导致您的收藏由升序进行排序name内部模型的属性.

请注意,更改任何属性时,不会自动对您的集合进行排序models.默认情况下,只有在创建新模型并将其添加到集合时才会进行排序; 但该方法comparator 将使用该collection.sort方法.

上面的代码通过设置一个事件监听器来利用这一点,该监听器简单地将任何changes 上的集合重新排序name为其属性models.

为了完成图片,我们在View与集合相关联的事件中设置了一个适当的事件监听器,以确保它在任何更改时重新呈现:

CollectionView = Backbone.View.extend({
    initialize: function() {
        this.collection = new ModelCollection();
        this.collection.on('all', function() { this.render() }, this);
    },

    render: function() {
        this.$el.html(this.collection.toJSON());
    }
});

而已 :)

Backbone文档的相关摘录:

默认情况下,comparator集合没有.如果定义a comparator,它将用于按排序顺序维护集合.这意味着在添加模型时,会将它们插入到正确的索引中collection.models.比较器可以定义为sortBy(传递一个接受单个参数的函数),作为sort(传递一个需要两个参数的比较器函数),或者作为一个字符串,指示要排序的属性.如果您稍后更改模型属性,[...]带有a的集合comparator将不会自动重新排序,因此您可能希望sort在更改会影响订单的模型属性后调用.