Backbone Marionette/ItemView标签

Question

我想呈现一个<select>与<option>基于使用木偶的ItemView控件集合的.因为选项需要有实际的"值"才能使我的App工作,所以我有点不确定如何让Marionette来处理这个问题？如果我tagName: 'option'在我的ItemView中设置了一个,我不确定如何在渲染后添加该选项.我以为我可以<option value="<%= id %>">放在模板中,但这会导致双<option>元素渲染,因为我已经在tagName我的ItemView 的属性中指定了它.这样做的最佳做法是什么？我的模板看起来像这样:

<script type="text/template" id="sport-item-view">
    <option value="<%= id %>"><%= name %></option>
</script>

Answer 1

您是否使用CollectionView作为父视图类型来呈现模型集合select？如果你是,你不应该.

由于option项目需要属性中的所有内容,因此为每个选项呈现模板会让您感到痛苦,因为您已经遇到过.相反,ItemView对整个select盒子使用一个.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个视图,这意味着您必须从选择框中读取选定的值以确定您要处理的模型.但这只是几行代码,否则会节省大量的麻烦.