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的一部分，直到它的最高祖先插入所有子视图，因此它的元素＆＃39;在最外层视图完成构建DOM之前，初始化不会起作用。说明这一点：

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

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

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

Answer 1

您可以将对父视图（最外层视图）的引用传递给子视图，并让它们从父视图中侦听ready事件。

//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 - 如何处理子视图的元素初始化？

1 个答案: