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

vatpfxk5 于 2022-11-10 发布在其他

关注(0)|答案(2)|浏览(103)

我尝试将Select 2小部件与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
  }
}

正如您所看到的，我必须在呈现和关闭时调用Select 2 initialize和destroy方法，以便将所需的其他标记添加到DOM中。
只要处理select标记的视图（SelectCollectionView）已经被添加到DOM中，这种设置就可以很好地工作。如果不是这样，Select 2的附加标记就会丢失，因为它们不是SelectCollectionView的$el的一部分，因此不会被添加到DOM中。
我想知道如何优雅地解决这个问题？可以添加一个额外的div容器，并在其中呈现所有内容，但这将为脚本和DOM产生额外的代码。这也使我的视图不那么通用。我只是希望有一个更好的解决方案，我没有想到。

backbone.js

来源：https://stackoverflow.com/questions/16822780/how-to-use-select2-with-backbone-marionette-views-outside-the-dom

2条答案

按热度按时间

mnemlml81#

正如您所猜想的那样，您需要一个包含div来包围模板。幸运的是，这真的很简单。与您当前拥有的不同：

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

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

模板. html

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

然后在你看来：

选择集合视图. js

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

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

赞(0）回复(0）举报 2022-11-10

798qvoo82#

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

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，用于在运行时操作选择项。

赞(0）回复(0）举报 2022-11-10

我来回答

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

2条答案

模板. html

选择集合视图. js

相关问题

热门标签

最新问答