Question

我想创建一个包含集合中下拉列表的CompositeView：

我的观点：

var ItemView = Backbone.Marionette.ItemView.extend({
    template: '#item-tpl'
});

var CompositeView = Backbone.Marionette.CompositeView.extend({
    template: '#comp-tpl',
    itemView: ItemView,
    itemViewContainer: '#mySelect'         
});

我的模板：

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

<script id = "comp-tpl" type="text/template">
   ...
          <form>
          <div class="control-group">
                <select id='mySelect'></select>
          </div>
         </form>

   ...
</script>

呈现的HTML显示默认div，它打破了选项列表

<select id="mySelect">
    <div>
        <option value="5">name 1</option>
    </div>
    <div>
        <option value="6">name 2</option>
    </div>
</select>

我怎样才能做到这一点：

<select id="mySelect">
    <option value="5">name 1</option>
    <option value="6">name 2</option>
</select>

Answer 1

我会使用这种技巧：http://jsfiddle.net/c9Lrm/8/

首先简化模板：

<script id = "item-tpl" type="text/template">
  <%= name %>
</script>

然后，您需要提供有关项目视图的信息，以便使用您想要的数据进行渲染：

var aItemView = Backbone.Marionette.ItemView.extend({
    template: '#item-tpl',
    tagName: "option",
    onRender: function(){
        this.$el.attr('value', this.model.get('id'));
    }
});

您指定了tagName属性，因此不会使用默认的div标记进行呈现，而是使用您需要的option标记。然后，当渲染选项时，您需要设置value属性，使用onRender函数。

最后，这是你的新复合视图：

var aCompositeView = Backbone.Marionette.CompositeView.extend({
    template: '#comp-tpl',
    itemView: aItemView,  
    itemViewContainer: "select"   
});

我们指定itemViewContainer告诉Marionette将项目视图放在何处。这样，我们就没有必要重新定义appendHtml。

这个解决方案更清洁，因为我们使用的是Marionette功能，而不是自己做所有事情......当然，其他解决方案也可以使用。

如果您想了解有关使用Marionette生成正确HTML结构的更多信息，您可能会对我的博文感兴趣：http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/

Answer 2

实际上很简单，你需要做的就是用“ jquery 包装”el“（元素），这样视图应该是这样的：

var aItemView = Backbone.Marionette.ItemView.extend({
..
..

  el: $('#mySelect'),

..

避免使用默认div，您只能使用所需的元素。所以会得到这个

<select id="mySelect">
  <option value="5">name 1</option>
  <option value="6">name 2</option>
</select>

Backbone.Marionette CompositeView选项列表

2 个答案: