如何交换视图的模板并删除旧视图

Question

我有以下代码：

switch (type) {
    case "countdown":
        this.render(_this.templates.countdown);
        break;
    case "timer":
        this.render(_this.templates.timer);
        if (App.Views.timer) App.Views.timer.remove();
        App.Views.timer = new Timer();
        break;
}

所以，正如我所想的那样，当呈现模板时，我们将删除以前的视图，因为新 DOM 元素上的 link 已更改。但我不确定真正删除了哪些旧视图。

因为如果我在 if (App.Views.timer) App.Views.timer.remove(); 之后添加 console.log(App.Views.timer)，我会得到：child {cid: "view3", $el: jQuery.fn.init(1), el: div#timer.timer}。而且看起来什么都没变！

我有两个问题。

1. 从内存中删除视图的方法是否正确？
2. 如果我有一个可以更改模板的 div，这是创建新视图的正确方法吗？不幸的是，仅隐藏模板的解决方案不适合我的情况。

Answer 1

视图的 remove 功能有什么作用？

View's remove function 只是从 DOM 中删除元素，同时取消绑定任何 DOM 相关事件和 Backbone 特定事件。

Removes a view and its el from the DOM, and calls stopListening to remove any bound events that the view has listenTo'd.

code for the remove function是：

// Remove this view by taking the element out of the DOM, and removing any
// applicable Backbone.Events listeners.
remove: function() {
  this._removeElement();
  this.stopListening();
  return this;
},

关于记忆中的景色

所以它仍然存在于内存中，直到您释放任何剩余的引用。将视图对象记录到控制台使其保持活动状态，因为它是对它的引用。

分享一个 div 多视图

我不会同意你的做法。您可以将 Backbone Router 与路由一起使用，然后为自己制作某种布局视图，而不是开关盒。

一个超级简单的布局视图可能如下所示：

var LayoutView = Backbone.View.extend({
    initialize: function() {
        // caching the jQuery object on init
        this.$content = this.$('#content');
    },
    setContent: function(view) {
        var content = this.content;
        if (content) content.remove();
        content = this.content = view;
        this.$content.html(content.render().el);
    },
});

在路由器中使用：

var Router = Backbone.Router.extend({
    routes: {
        'about': 'aboutRoute',
        'contact': 'contactRoute',
        // put the catch-all last
        '*home': 'homeRoute',
    },
    initialize: function() {
        // create the layout once here
        this.layout = new views.Application({
            el: 'body',
        });
    },
    homeRoute: function() {
        var view = new views.Home();
        this.layout.setContent(view);
    },
    aboutRoute: function() {
        var view = new views.About();
        this.layout.setContent(view);
    },
    contactRoute: function() {
        var view = new views.Contact();
        this.layout.setContent(view);
    }
});

我在上写了一个详细的答案。