0

看起来每当我调用 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);
  }

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

Chrome 调试器输出：

$('html')

<html>​
<script id=​"tinyhippos-injected">​…​&lt;/script>​
<head>​…​&lt;/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>');

解决方案：

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

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

1 回答 1

2

由于您通过添加视图，$('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);
于 2013-01-23T19:02:37.433 回答