我想基于使用 Marionette 的 ItemView 的集合来呈现带有 <option> 的 <select>。因为选项需要具有实际的“值”才能使我的应用程序正常工作，所以我有点不确定如何让 Marionette 处理这个问题？如果我在我的 ItemView 中设置 tagName: 'option'，我不确定如何在渲染后添加选项。我以为我可以让<option value="<%= id %>"> 在模板中，但这会导致双<option> 元素呈现，因为我已经在我的ItemView 的tagName 属性中指定了它。这样做的最佳做法是什么？我的模板如下所示：
<script type="text/template" id="sport-item-view">
<option value="<%= id %>"><%= name %></option>
</script>
【问题讨论】：
您是否使用 CollectionView 作为父视图类型来将模型集合呈现到 select 中？如果你是，你不应该是。
由于option 项目需要属性中的所有内容，因此您已经遇到过为每个选项渲染模板变得很痛苦的情况。相反，对整个 select 框使用单个 ItemView。 ItemView 可以将集合放入其中，您可以通过模板内的items 访问该集合。这使得使用单个视图从集合中创建选择框变得非常简单：
<script type="text/html" id="select-template">
<% _.each(items, function(item){ %>
<option value="<%= item.id %>"><%= item.get("someValue") %></option>
<% }) %>
</script>
var SelectView = Marionette.ItemView.extend({
tagName: "select"
});
var s = new SelectView({
collection: myData
});
s.render();
这样做的缺点是您的选择框只有 1 个视图，这意味着您必须从选择框中读取选定的值才能确定您正在处理的模型。但这只是几行代码，否则它会省去很多麻烦。
【讨论】：
"click": "somemethod"
您可以简单地使用attributes。
你可以这样重写构造函数：
constructor : function (options) {
this.attributes = {
value : options.model.id
};
ItemView.prototype.constructor.apply(this, arguments);
}
你的模板会是这样的：
<%= name %>
【讨论】：
也许在更传统的意义上处理这种类型的视图更好，只需在渲染之后添加选项，或者在触发事件上添加选项。以下是我根据获取的数据动态添加选项的方法：
var mySelect = this.ui.mySelect; // a reference to select from ui hash
mySelect.html(''); //clear
//for each data item add an option
_.each(items, function (item) {
mySelect .append($('<option/>', {
value: item.id,
text: item.description
}));
});
【讨论】：