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

Question

我已经使用 Backbone.js 几个月了，最近在将主干与一个 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');

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