javascript - Backbone.js:.render() 和 .remove() 应该能够相互逆转吗？

Question

因为 Backbone.js 非常灵活，我想知道某些事情的最佳方法。在这里，我想知道我是否应该构建我的应用程序的 View ，以便“.render()”和“.remove()”正确地相互反转。

起初，看起来最简洁的方法是向 View 传递一个 ID 或要附加到的 jQuery 元素。但是，如果以这种方式完成，调用“.render()”将无法正确替换 DOM 中的 View ，因为主元素永远不会放回 DOM 中:

App.ChromeView = Backbone.View.extend({
  render: function() {
    // Instantiate some "sub" views to handle the responsibilities of
    // their respective elements.
    this.sidebar = new App.SidebarView({ el: this.$(".sidebar") });
    this.menu = new App.NavigationView({ el: this.$("nav") });
  }
});

$(function() {
  App.chrome = new App.ChromeView({ el: $("#chrome") });
});

对我来说，最好将其设置为 .remove() 和 .render() 正好相反:

App.ChromeView = Backbone.View.extend({
  render: function() {
    this.$el.appendTo('body');
    this.sidebar = new App.SidebarView({ el: this.$(".sidebar") });
    this.menu = new App.NavigationView({ el: this.$("nav") });
  }
});

$(function() {
  App.chrome = new App.ChromeView();
});

Backbone.js 社区怎么说？ .remove() 和 .render() 应该是同一枚硬币的两面吗？

Answer 1

我更喜欢 render 不将 View 的元素附加到 dom。我认为这促进了松散耦合、高内聚、 View 重用，并促进了单元测试。我将呈现的元素附加到容器，直到路由器或主“布局”类型的容器 View 。

remove 的好处在于它可以在 View 不了解父元素的情况下工作，因此仍然是松耦合和可重用的。我绝对不喜欢将我的布局 HTML(#main 或其他)中的随机 DOM 选择器放入我的 View 中。那里的耦合肯定不好。

我会注意到，在某些恼人的情况下，有些事情会像 chosen jQuery plugin需要一些代码在元素附加到 DOM 后运行。对于这些情况，我通常会在 View 中实现一个 postAttach() 回调，并尽量减少那里的代码量。