0

我正在尝试将 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 生成额外的代码。这也使我的观点不那么通用。我只是希望有一个我没有想到的更好的解决方案。

4

2 回答 2

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 周围包裹一个 div <select>，然后 select2 添加的所有额外标记都将安全地包含在视图的$el.

于 2013-05-30T14:14:30.147 回答
0

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

    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();

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

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

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

于 2018-04-18T18:11:24.787 回答