javascript - 如何交换 View 模板并删除旧 View

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;
}

所以，正如我想的那样，当渲染模板时，我们将删除以前的 View ，因为新 DOM 元素上的链接发生了变化。但我不确定哪些旧观点真正被删除了。

因为如果我在 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. 从内存中删除 View 的方法是否正确？
2. 如果我有一个可以更改模板的 div，这是创建新 View 的正确方法吗？不幸的是，仅仅隐藏模板的解决方案不适合我的情况。

Answer 1

View 的remove函数有什么作用？

View's remove function只是从 DOM 中删除元素，同时取消绑定(bind)任何 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;
},

关于仍在内存中的 View

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

为多个 View 共享一个 div

在这件事上我不会按照你的方式去做。您可以使用Backbone Router代替开关盒。与路线，然后让自己某种布局 View 。

一个 super 简单的布局 View 可能如下所示:

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);
    }
});

我在how to use a router with a simple layout view上写了详细的答案.