如何在 DOM 外部将 Select2 与 Backbone Marionette 视图一起使用答案

【问题标题】：How to use Select2 with Backbone Marionette views outside the DOM如何在 DOM 外部将 Select2 与 Backbone Marionette 视图一起使用
【发布时间】：2013-05-29 19:59:18
【问题描述】：

我正在尝试将 Select2 小部件与 Backbone Marionette 视图集成。我的简单设置使用 Marionette.CollectionView 来创建和处理选择标签，并使用 Marionette.ItemViews 来呈现选项标签。

基本上是这样的：

SelectCollectionView = Backbone.Marionette.CollectionView.extend({
  itemView : SelectItemView,
  tagName : "select",

  onRender : function() {
    this.$el.select2();
  },

  onClose : function() {
    this.$el.select2("destroy");
  }
}

SelectItemView = Backbone.Marionette.ItemView.extend({
  tagName : "option",

  render : function() {
    // create the needed option tags
  }
}

如您所见，我必须在渲染和关闭时调用 Select2 的初始化和销毁方法，才能将所需的附加标签添加到 DOM。

只要处理选择标签 (SelectCollectionView) 的视图已经被添加到 DOM，这个设置就可以很好地工作。如果不是这样，Select2 的附加标签就会丢失，因为它们不是 SelectCollectionView 的 $el 的一部分，因此不会添加到 DOM 中。

我想知道如何优雅地解决这个问题？可以添加一个额外的 div 容器并在其中渲染所有内容，但这会为脚本和 DOM 生成额外的代码。这也使我的观点不那么通用。我只是希望有一个我没有想到的更好的解决方案。

【问题讨论】：

我不明白，您使用 onRender，因此 select 和所有选项元素都已渲染并添加到 dom。那么为什么你的解决方案不起作用？
@Luke 在 Backbone 上调用 render() 只会将视图呈现为其当前 el。那个 el 可能只存在于内存中，不需要已经附加到 DOM。这会给依赖于 DOM 内部工作的许多小部件带来问题——我选择 Select2 而不是 Chosen 的原因之一。
你试过用onShow代替onRender吗？

标签： backbone.js marionette backbone-views jquery-select2

【解决方案1】：

正如您所怀疑的，您将需要一个包含 div 来包围您的模板。幸运的是，这真的很简单。而不是你目前拥有的：

SelectCollectionView = Backbone.Marionette.CollectionView.extend({
  tagName : "select"

去掉tagName，在你的模板中（我假设你使用Handlebars或Underscore或类似的东西），定义你的HTML：

模板.html

<select class="whatever-you-want"></select>

那么在你看来：

SelectCollectionView.js

SelectCollectionView = Backbone.Marionette.CollectionView.extend({
  template: _.template(templateHtml)

Marionette 会自动将 div 包裹在您的 <select> 周围，然后 select2 添加的所有额外标记都将安全地包含在视图的 $el 中。

【讨论】：

【解决方案2】：

我花了一些时间才弄明白，但我以前是这样解决的：

    var Select2View = Mn.View.extend({
      template: _.template('<select class="form-control"><option></option></select>'),

      onRender:function() {
        this.$el.find('select').select2();
      }
    });

这里的重要部分是

this.$el.find('select').select2();

选择元素内部的select标签。但在我的示例中，我没有使用集合视图。如果您需要获取数据，您可以使用：

this.$el.find('select').select2({data: ['1','2','3','4']});

select2 还为在运行时操作选择项提供了非常好的 API。

【讨论】：