javascript - 使用backbone.js 排序和渲染数据时遇到一些问题

Question

使用backbone.js排序和渲染数据时遇到一些问题比较器中按“标题”排序。This.model.collection 具有按标题排序后的模型，但是当渲染开始时，模型 View 按顺序排序后。

    var TodoList = Backbone.Collection.extend({

    model: Todo,

    comparator: function(todo) {
        return todo.get('title');
    },

//function for sorting
    sortByDate: function () {
       this.comparator = function(todo){
           return todo.get('title');
       };
       this.sort();
    }

    });

    var TodoView = Backbone.View.extend({

    tagName:  "li",

    template: _.template($('#item-template').html()),

    initialize: function() {
        this.listenTo(this.model, 'change', this.render);
        this.listenTo(this.model, 'destroy', this.remove);
    },

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
    });

Answer 1

提供 comparator对于集合来说，只需确保它的模型按排序顺序维护，如果您想按该顺序渲染它，您只需从集合中检索模型(最常见的是在 Collection View 中完成)并渲染它们。

例如，在您的情况下，由于您没有 Collection View ，您可以执行以下操作

todoList.each(function (todo) {
  $('#output').append(new TodoView({model: todo}).el);
});

一般来说，您会将此代码作为 Collection View 的一部分。您可能还想维护对 View 的引用，以便可以轻松地重新渲染或删除它们。例如

var TodoCollectionView = Backbone.View.extend({

    views: {}, 

    render: function () {
        var frag = document.createDocumentFragment();
        this.collection.each(function (model) {
           var view = this.viewForModel(model);
           frag.appendChild(view.render().el);
        },this);

       this.$el.html(frag);
    },

    viewForModel: function (model) {
        var view;    
        if (this.views[model.cid]) {
           view = this.views[model.cid];
        } else {
           view = new TodoView({model: model});
           this.views[model.cid] = view;
        }
       return view;
    }
});

这是一个指向 jsbin 的链接