Question

看起来每当我调用view.remove（）时，它不仅会从dom中移除视图，还会移除整个身体

我在创建每个视图后调用showView

showView : function(view) {
        if (this.currentView) {
            this.currentView.remove();
            this.currentView.unbind();
            if (this.currentView.onClose) {
                this.currentView.onClose();
            }
        }

        this.currentView = view;

        $('body').html(this.currentView.render().el);
  }

由于不再有身体元素，我无法添加另一个视图

Chrome调试器输出：

$('html')

<html>
<script id="tinyhippos-injected">…</script>
<head>…</head>
</html>

运行view.remove（）后，屏幕变为白色，不会重新填充$（'body'）。html（this.currentView.render（）。el）;

编辑：

我将每个视图从el：$（'。body'）更改为el：'。mainContent'并在index.html文件中添加了一个。

在app.showView中，我添加了mainContent div（如果已删除）。最好除去整个身体的div。

if($('.mainContent').length == 0)
    $('body').append('<div class="mainContent"></div>');

SOLUTION：

我需要覆盖我的视图删除方法。我不想删除整个el，只删除内容：Recreating a removed view in backbone js

Backbone.View.prototype.remove = function() {
    this.undelegateEvents();
    this.$el.empty();
    return this;
    };

Answer 1

由于您要通过$('body').html(this.currentView.render().el);添加视图，因此无需在视图中设置el属性。

当您在视图中设置el属性时，您告诉主干找到该元素并将其用作基本元素。这样做时，您无需将其添加到$('body').html()页面，只需拨打view.render()即可。但是当你调用remove（）时，它会删除你设置的el（在你的情况下是'body'或'.mainContent'）。

如果您未指定el，则会为您生成新元素。在这种情况下，您需要使用$('body').html(this.currentView.render().el);添加到页面，但是当您调用remove()时，它只会删除生成的元素。

因此，如果您只是从视图中删除el: '.mainContent'，则可以避免检查并重新添加该元素。此外，您不必重写删除。

从视图中删除el: '.mainContent'后，您只需执行以下操作：

$('body').html(view1.render().el);
view1.remove();
$('body').html(view2.render().el);

删除backbone.js视图不允许我添加另一个视图

1 个答案: