backbone.js - 重新渲染视图 - 主干

Question

我是骨干新手，我正在尝试重新渲染视图的内容。我已经把代码放在jsfiddle中......

http://jsfiddle.net/rzYLU/11/

那么当用户点击重新渲染时，我怎样才能删除 dom 中的内容并只显示新项目？

Answer 1

最安全的做法是QuestionView在AppView. 然后你可以在添加新的之前调用remove每个；QuestionView该remove方法是：

用于从 DOM 中删除视图的便利功能。相当于调用$(view.el).remove()；

视图应该提供自己的remove实现来解除与非 DOM 事件的绑定，从而防止僵尸。默认设置只是el从 DOM 中删除视图，但如果你从一开始就这样做，当你的代码不可避免地发生变化时，一切都会很好地工作。

首先调整你QuestionView有一个remove方法来删除你绑定到模型的事件：

var QuestionView = Backbone.View.extend({
    //...
    remove: function() {
        this.model.off('change', this.render);
        this.$el.remove();
    }
});

然后，您需要进行一些调整来AppView跟踪您QuestionView的 s：

var AppView = Backbone.View.extend({
    //...
    initialize: function() {
        //...
        this.sub_views = [ ];
        //...
    },
    //...
    addOne: function(question) {
        var view = new QuestionView({
            model: question
        });
        this.sub_views.push(view); // <----------------------- Add this
        this.$("#question-list").append(view.render().el);
    },
    addAll: function() {
        for(var i = 0; i < this.sub_views.length; ++i) // <--- And these three lines
            this.sub_views[i].remove();
        this.sub_views = [ ];
        Questions.each(this.addOne);
    }

演示：http: //jsfiddle.net/ambiguous/FF9eG/

我还更新了您的代码以使用on和off代替bind并unbind匹配新样式。较新版本的 Backbone 也有 in 的缓存版本，$(this.el)因此this.$el我也更新了代码以使用它。