Question

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

<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个视图，这意味着您必须从选择框中读取所选值以确定您正在处理的模型。但这只是几行代码，否则会节省大量的麻烦。

Answer 2

您只需使用attributes。

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

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

你的模板将是这样的：

<%= name %>

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

Answer 3

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

        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
            }));
        });

Backbone Marionette / ItemView标签

3 个答案: