0

我想创建一个包含来自集合的下拉列表的 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>
4

2 回答 2

6

我会使用这种技术：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-骨干木偶复合视图/

于 2013-06-14T21:24:20.437 回答
0

实际上非常简单，您唯一需要做的就是用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>
于 2014-02-06T23:39:19.070 回答