Backbone.js 主干木偶/项目视图标签

我想使用木偶的ItemView基于集合渲染一个。因为这些选项需要有实际值才能让我的应用程序工作，所以我有点不确定如何让木偶来处理这个问题？如果在ItemView中设置标记名：“option”，我不确定渲染后如何添加该选项。我想我可以让这个元素进入模板，但这会导致呈现一个双元素，因为我已经在ItemView的标记名属性中指定了它。这样做的最佳实践是什么？我的模板如下所示：

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

<%= name %>

你可以简单地使用

您可以通过以下方式重写构造函数：

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

您的模板如下所示：

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

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

---

是否使用CollectionView作为父视图类型来将模型集合渲染到“选择”视图中？如果你是，你就不应该是

由于选项项需要属性中的所有内容，因此呈现每个选项的模板会变得很痛苦，正如您已经遇到的那样。相反，对整个选择框使用单个ItemView。ItemView可以将一个集合带入其中，您可以在模板内的项处访问该集合。这使得使用单个视图从集合中创建选择框变得非常简单：

<script type="text/html" id="select-template">
  <% _.each(items, function(item){ %>
    <option value="<%= item.id %>"><%= item.get("someValue") %></option>
  <% }) %>
</script>

---

这样做的缺点是，您的选择框只有一个视图，这意味着您必须从选择框中读取所选值，以确定您正在处理的模型。但这只是几行代码，否则就省去了很多麻烦。

如何获取当前模型的ID？我尝试过这个。model.get'id'，但这显然是错误的…这在我的上下文中没有多大意义：请原谅我的无知，但是创建和维护2个视图对象+1个模板只是为了渲染一个选择是否真的有意义？是的，我可能不应该尝试将所有内容都塞进木偶中，这也是从另一个答案得到的。这是一个琐碎的东西很多代码…谢谢你的答复。由于这是一个更大的应用程序的一部分，而select最终会驱动UI的另一部分，因此我更愿意将其保留在主干/主干内。木偶…我认为您不理解我。这是一个更大视图的功能之一。当然，您可以在“选择更改”或任何您需要的内容上添加事件侦听器，以驱动进一步的UI呈现。谢谢Derick！这是一个优雅的解决方案。我现在已经让它工作了，但是它没有触发任何事件，比如单击select:'foo'，然后foo:function{console.log'bar}的函数将不会注册。有什么想法吗？此处代码：因为视图标记是选择框，所以不需要为事件指定元素。只需单击事件配置的：somemethod