Backbone.js：应该.render（）和.remove（）能够互相反转吗？

Question

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

首先，看起来最干净的方式是将视图传递给要附加的ID或jQuery元素。 如果事情以这种方式完成，调用'.render（）'将无法正确替换DOM中的视图，因为主元素永远不会放回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不会将视图的元素附加到dom。 我认为这促进了松散耦合，高内聚，视图重用以及便于单元测试。 我将渲染的元素附加到容器，直到路由器或主“布局”类型的容器视图。

remove是它可以在视图不知道父元素的情况下工作，因此仍然松散耦合和可重用。 我绝对不喜欢将我的布局HTML（ #main或其他）中的随机DOM选择器放入我的视图中。 那里的联系绝对不好。

我会注意到，在某些烦人的情况下，像选择的jQuery插件这样的东西需要一些代码才能在元素附加到DOM之后运行。 对于这些情况，我通常在视图中实现postAttach()回调，并尽量保持代码量尽可能小。

Answer 2

是的，在内部View.remove()是非常侵略性 。

对于使用外部el重新创建View的建议，我习惯用这样重写它：

remove: function(){
  this.$el.empty();
  return this;
}

但我不认为框架应该实现魔术行为以避免这种外部DOM元素的删除 。

这个框架行为是积极的，好的，但是如上所述，在需要时自定义它是非常便宜的。

Answer 3

那这个呢？ 如果我们只有.initialize和.render获取一个parentSelector属性，我们可以这样做并最终得到一个用法：

• 松散耦合
• 可逆.remove（）/。render（）
• 调用方法的单个方法实例化和呈现

例如：

// Bootstrap file
curl(['views/app']).then(
    function(App){
        app = new App('body');
    });



// view/app.js
   define([
        'text!views/app.tmpl.html'
    ,   'link!views/app.css'
    ]
,   function (template) {

    var App

    // Set up the Application View
    App = Backbone.View.extend({
        // Standard Backbone Methods
        initialize: function (parentSel) {
            console.log('App view initialized')
            if (parentSel) { this.render(parentSel) }
        }
    ,   render: function (parentSel) {
            if (parentSel) { this._sel = parentSel } // change the selector if render is called with one
            if (!this._sel) { return this } // exit if no selector is set

            this.$el.appendTo(this._sel)

            this.$el.html(
                this.compiledTemplate({ 'content':'test content' })
            );
            return this
        }
        // Custom Properties
    ,   compiledTemplate: _.template(template)
    })

    return App
});


// External usage
// I can call .remove and .render all day long now:
app.remove()
app.render()
app.remove()