Question

我有两个主干观点：

VideoView（扩展Backbone.View）
ExpandingVideoView（扩展VideoView）

我的网站上有多种类型的视频，有些视频基于其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是管理其子视图的父视图）

Answer 1

Backbone.js内置了什么来促进这一点？

总之没有。但是如果你想要生成一个“列表视图”类型的视图，根据类型对它的项目进行不同的格式化，那么你可以查看Backbone.Marionette的CollectionView并从中得到一些灵感。

Marionette的集合视图不支持立即渲染不同的子视图，但您可以轻松覆盖基类中的方法来执行此操作。

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

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

1 个答案: