Backbone - 如何处理子视图的元素初始化？

Question

我已经使用 Backbone.js 几个月了，最近我运行在将 backbone 与一个 CSS 框架一起使用时陷入了困境。

CSS 框架中的一些元素需要一些 JS 初始化，这些元素是嵌套视图（子视图）的一部分。作为子视图的一部分，我立即假设这些初始化应该在子视图内部处理：

app.ChildView = Backbone.View.extend({

  el: ....

  template: ...

  events: {
    ...
  },

  initialize: function() {
    ...
  },

  render: function() {
      ....

      this.$elementWithInitialization = this.$('.element');
      this.$elementWithInitialization.initialize();

      return this;
  },
});

作为子视图，此视图在其最高祖先插入所有子视图之前不会成为 DOM 的一部分，因此在最外层视图完成构建之前其元素的初始化不会起作用DOM。举例说明：

<view1>
  <view2>
    <view3></view3>
    <view3></view3>
    ...
  </view2>
  <view2>
    <view3></view3>
    <view3></view3>
    ...
  </view2>
  ...
</view1>

因此，view3中的元素只能初始化到view1结束插入其所有子视图。我很好奇在子视图中处理这些元素初始化的合适方法是什么，考虑到它们的渲染取决于它们的祖先。

我总是可以为最外层视图中的所有这些元素做一个选择器并初始化它们，但我认为这打破了视图的模块化和关注点分离。感谢您的输入。

Answer 1

您可以将对父视图（最外层视图）的引用传递给子视图并让它们监听来自父视图的就绪事件。

//Child
initialize: function(options){
  this.listenTo(options.outermostParent, 'ready', this.initCSSComponent);
}

//Outermost parent when stuff is ready and injected to DOM
this.trigger('ready');

如果您有一个全局事件发射器对象，您也可以使用它。

Backbone - 如何处理子视图的元素初始化？

Backbone - How to handle element initialization for child views?

initialization

view

backbone.js