Backbone / Marionette div包装器干扰选择选项

Question

我有一个布局视图，其中一个区域包含一个选择输入。

//template
<div class="col-xs-12">
    <select name="type" id="drop" class="select"></select>
</div>

我有一个LayoutView，它定义了以下区域，并指定了一个集合视图，用选项填充选择菜单。

//layout
Backbone.Marionette.LayoutView.extend({
    regions: {drop: "#drop"},
    onRender: function() {
        this.getRegion("drop").show(new (Marionette.CollectionView.extend({
            childView: FieldView
        }))(collection: fieldCollection)));
    }
}

FieldView和fieldCollection工作正常，但我遇到了问题。渲染时，集合子视图将选项包装在div标记中，从而阻止选择菜单正常工作。

//Rendered HTML
<select name="type" id="drop" class="select">
    <div>
        <option value='1'>Option 1</option>
        <option value='2'>Option 2</option>
        <option value='3'>Option 3</option>
    </div>
</select>

关于如何摆脱那个讨厌的div标签的任何建议？并且不应该根据区域将子视图的el限定为选择元素本身吗？

Answer 1

由于你的问题很常见，因此经常会讨论额外的div功能。例如，请参阅这个非常有趣的issue。

不幸的是，Backbone和Marionette Views都知道他们的父视图，即使该父视图是LayoutView。事实上，Marionette继承了Backbone的包装行为，在大多数情况下，它是视图最常见的结构。

更改CollectionView el，危险地生活

您可以采取更加危险的方式将Region Region的元素分配给CollectionView的el，我在此Answer中对此进行了描述。我在那里建议的是覆盖Region的.attachHtml()方法，将子视图的内容（而不是el）直接插入Region的el ， 和 ，最重要的是，使用{{1将子视图的el设置为区域el }}。但请仔细阅读那里的警告。两个视图之间的事件将共享！您无法避免这种情况。

拥抱包装，拥抱Backbone

就我个人而言，我主张与一起工作，而不是反对Backbone / Marionette。我知道您可能有充分的理由想要在LayoutView中使用view.setElement()元素。 然而，如果您可以在那里没有该元素，我可以为您提供一个非常简单快速的解决方案：您可以使用您想要的任何（正确的）HTML元素来查看视图的包装器。因此，您的<select/>可能如下所示：

.show()

我在那里做的所有事情都改变了视图的香草onRender: function() { this.getRegion("drop").show(new (Marionette.CollectionView.extend({ tagName: "select", attr: { name:"type" }, id: "drop", className: "select", childView: FieldView }))(collection: fieldCollection))); } <div/>，

el

别忘了，您想要为您的地区分配一个新元素。我们将原始的<select name="type" id="drop" class="select"></select> 包围<div/>，例如，

<select/>

访问LayoutView

中的<div class="col-xs-12" id="field-region"> </div> 元素

<select/>语句不是CollectionView的<select/>。这可能不会打扰你，但在某些时候你可能会在你的LayoutView中做el之类的事情。好消息是，您可以原生访问$("#drop").val()，因为它是您传入的CollectionView的<select/>。费用是您希望保留该视图的引用。像，

el