通过父构造函数创建 Backbone 继承视图答案

【问题标题】：Create Backbone inherited view via parent constructor通过父构造函数创建 Backbone 继承视图
【发布时间】：2015-02-06 11:31:16
【问题描述】：

我有 2 个主干视图：

VideoView（扩展 Backbone.View）
扩展视频视图（扩展视频视图）

我的网站上有多种类型的视频，其中一些视频的行为基于其data 属性（即data-has-overlay、data-is-expanded）；

我想在 VideoView 上将它们全部初始化，然后检查传递给它的元素并在适当的情况下委托给子视图。

问题：

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

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 是管理其子视图的父视图）

【问题讨论】：

标签： javascript inheritance backbone.js constructor

【解决方案1】：

Backbone.js 中是否有任何内置功能来促进这一点？

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

Marionette 的集合视图不支持开箱即用地呈现不同的子视图，但您可以重写基类中的方法来轻松完成此操作。

如果您想要并需要更复杂的视图结构，绝对值得一看 Marionette。

【讨论】：