javascript - 通过父构造函数创建 Backbone 继承 View

Question

我有 2 个主干观点:

• VideoView(扩展 Backbone.View)
• ExpandingVideoView(扩展视频 View )

我的网站上有多种类型的视频，有些根据它们的 data 属性(即 data-has-overlay、data-是展开的);

我想在 VideoView 上初始化它们，然后检查传递给它的元素并在适当时委托(delegate)给 subview 。

问题:

• Backbone.js 是否有任何内置的东西来促进这一点？
• 是否有一个优雅的解决方案，或者我是否应该更改我的初始创建代码以在 DOM 级别创建正确的 View (即搜索具有特定数据属性的视频元素并相应地实例化)。

示例 BB 代码:

var VideoView = Backbone.View.extends({

  initialize: function ( options ) {

    // something here to check the el and create ExpandedVideoView if appropriate

    if ( this.$el.data('is-expanded') ) {
      // Create ExpandedVideoView instead..?
    }
  },

  foo: function () { return 'foo'; }
});

var ExpandedVideoView = VideoView.extends({

  initialize: function () {},

  bar: function () { return 'bar'; }
});

标记如下所示:

<div class="Video" data-src="..." data-is-expanded data-has-controls>...</div>
<div class="Video" data-src="..." data-has-controls>...</div>
<div class="Video" data-src="..." data-is-expanded>...</div>

视频是在类似于以下的函数中创建的:

self.$el.find('.Video').each(function ( index, el ) {

  self.videoViews.push( new VideoView({ el: el }) );
});

(其中 self 是管理其 subview 的父 View )

Answer 1

Backbone.js 是否有内置的东西来促进这一点？

简而言之，没有。但是，如果您希望生成一种“ ListView ”类型的 View ，根据类型对其项目进行不同的格式化，那么您可以查看 Backbone.Marionette 的 CollectionView 并从中汲取一些灵感。

Marionette 的 Collection View 不支持开箱即用地呈现不同的 subview ，但您可以覆盖基类中的方法以轻松完成此操作。

如果您想要并且需要更复杂的 View 结构，那么绝对值得一看 Marionette .