Question

我正在尝试使用twitter bootstrap，backbone和marionette作为表单。我想要一个标签和旁边的选择。我能够显示选择但现在无法在select元素之前添加标签。

var app = new Marionette.Application(); 
app.addRegions({

    region1: "#region1"

});
//.. model and collection here
app.typeView = Marionette.ItemView.extend({
    tagName: "option",
    template: "#item",
    initialize: function(options){

        this.$el.attr('value', options.model.get('id'));

    }
});
/* COLLECTION VIEWS */
 app.listview = Marionette.CollectionView.extend({
              tagName: "select",
              id: 'type-select',
              itemView: app.typeView,
});


app.on("initialize:after", function() {
        //somelist is defined here
    var lv = new app.listview({
        collection: somelist
    });
    app.region1.show(lv);
});

这是html

<div id="region1" class="container">

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

我希望它看起来像：

<div id="region1" class="container">
           <label for="type-select">Name</label>
           <select id="type-select"><option>...</option></select>         
</div>

但它总是看起来像：

<div id="region1" class="container">

               <select id="type-select"><option>...</option></select>         
    </div>

Answer 1

尝试使用复合视图：

<script type="text/template" id="select-field">
    <label for="type-select">Name</label>
    <select id="type-select"></select>
</script>

app.listview = Marionette.CompositeView.extend({
          template: "#select-field",
          itemView: app.typeView,
          itemViewContainer: "select"
});

Backbone / marionette：在添加集合之前添加元素

1 个答案: