3

我想使用 Marionette 的 ItemView 基于集合呈现<select>with 。<option>因为选项需要具有实际的“值”才能使我的应用程序正常工作，所以我有点不确定如何让 Marionette 处理这个问题？如果我tagName: 'option'在我的 ItemView 中设置 a，我不确定如何在渲染后添加选项。我以为我可以让<option value="<%= id %>">模板中的，但这会导致呈现双<option>元素，因为我已经在tagName我的 ItemView 的属性中指定了它。这样做的最佳做法是什么？我的模板如下所示：

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

3 回答 3

7

您是否使用 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 个视图，这意味着您必须从选择框中读取选定的值才能确定您正在处理的模型。但这只是几行代码，否则它会省去很多麻烦。

于 2013-08-12T18:50:50.897 回答
1

您可以简单地使用属性。

您可以通过这种方式覆盖构造函数：

constructor : function (options) {
  this.attributes = {
    value : options.model.id
  };
  ItemView.prototype.constructor.apply(this, arguments);
}

你的模板将是这样的：

<%= name %>

http://jsfiddle.net/vpetrychuk/6Bk9T/

于 2013-08-12T16:22:43.173 回答
0

通过在渲染之后或在触发事件上添加选项，以更传统的方式处理这种类型的视图也许会更好。这是我根据获取的数据动态添加选项的方法：

        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
            }));
        });
于 2013-08-12T16:59:08.117 回答