Question

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

因此，当用户点击重新渲染时，如何删除dom中的内容并仅显示新项目？

Answer 1

最安全的做法是跟踪QuestionView内的AppView个实例。然后，您可以在添加新的remove之前致电QuestionView。 remove method is a：

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

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

首先调整QuestionView以使用remove方法删除您绑定到模型的事件：

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

然后，您需要对AppView进行一些调整，以便跟踪您的QuestionView：

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在this.$el中也有$(this.el)的缓存版本，所以我也更新了代码以便使用它。

重新渲染视图 - 主干

1 个答案: