重新渲染视图 - 主干答案

【问题标题】：Re-render the view - backbone重新渲染视图 - 主干
【发布时间】：2012-10-08 02:00:42
【问题描述】：

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

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

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

【问题讨论】：

我添加了这个。$("#question-list").empty();在 addAll 中，这是正确的做法吗？
感谢 Matti..但我不确定这是正确的方式
我认为 Backbone 很少有一个正确的方法。使用一个简单的列表，您想在其中销毁所有以前的元素，我认为这是最简单的事情。
对于带有子视图的更复杂的场景，我发现这篇博文很有帮助：ianstormtaylor.com/…

标签： backbone.js

【解决方案1】：

最安全的做法是在您的AppView 中跟踪您的QuestionView 实例。然后你可以在添加新的之前在每个QuestionView 上调用remove； 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 进行一些调整以跟踪您的QuestionViews：

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)，所以我更新了代码以使用它。

【讨论】：