Question

主干js中的View.remove（）函数从DOM中删除视图本身的容器元素，防止重新创建已删除的视图。知道如何处理这种情况

这是我的代码，

var AttributeView = Backbone.View.extend({
        el: $("#attrs"),
        template:_.template($('#attrs-template').html()),

        initialize:function() {
        },


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

        dispose:function(eventName){
            this.unbind();
            this.remove();
        },

    });


var attrView = new AttributeView();
....
attrView.dispose();
//Later on some event I do the below
attrView = new AttributeView()
attrView.render();

上面的最后两行不会重新创建视图，因为id =“attrs”的div不再存在。

Answer 1

首先，您不需要dispose方法，标准remove就足够了：

var attrView = new AttributeView();
//....
attrView.remove();  // <--------- Do this instead
//...
attrView = new AttributeView()
attrView.render();

其次，如果标准版本不能满足您的需要，您可以覆盖remove。 default implementation只会删除this.el并清除一些事件侦听器：

remove: function() {
  this.$el.remove();
  this.stopListening();
  return this;
},

在您的情况下，您要撤消render所做的所有事情，这意味着清除 this.el中的HTML 并通过调用undelegateEvents删除事件：

remove: function() { this.undelegateEvents(); this.$el.empty(); this.stopListening(); return this; },

然后你可以拨打attrView.remove()并将其删除并(new AttributeView()).render()将其恢复。

演示：http://jsfiddle.net/ambiguous/Pu9a2/3/

Answer 2

查看LayoutManager的Backbone Views，它了解当你删除一个视图（父 - 在包含意义上而不是对象层次结构意义上）时，它的子视图也应该被删除。

在骨干js中重新创建已删除的视图

2 个答案: