Question

使用backbone.js排序和渲染数据时遇到了一些问题有按标题排序＆＃39;在比较器中。 This.model.collection在按标题排序后有模型，但是在按顺序排序后渲染开始模型视图。

    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只是确保它的模型按排序顺序维护，如果你想按顺序渲染它，你只需要从集合中检索模型（最常见的是这样做）在你的集合视图中）并渲染它们。

例如，在您的情况下，由于您没有集合视图，您可以执行以下操作

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

但一般来说，您可以将此代码作为集合视图的一部分。您可能还希望维护对视图的引用，以便轻松地重新呈现或删除它们。例如

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

的链接

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

1 个答案: