Backbone.Marionette - 将变量传递给复合视图标记

更新（相关详细信息）：此复合视图位于复合视图的集合中。Backbone.Marionette - 将变量传递给复合视图标记

如何使用Backbone.Marionette组合视图构造以下HTML？

<optgroup label="Group 1"> 
     <option>Item 1</option> 
     <option>Item 2</option> 
     <option>Item 3</option> 
    </optgroup> 
    <optgroup label="Group 2"> 
     <option>Item 4</option> 
     <option>Item 5</option> 
     <option>Item 6</option> 
    </optgroup>

因为我想避免<div>包装，我必须指定<optgroup>作为标记名。

view = Backbone.Marionette.CompositeView.extend({ 
    collection: some_collection, 
    itemView: some_itemview, 
    template: '#some_template', <!-- What goes inside the template? --> 
    itemViewContainer: 'optgroup', 
    tagName:'optgroup', <!--specify to avoid the default div--> 

    <!-- What should I specify in order to pass label="Group1" to the optgroup tag--> 
});

来源

2012-12-05 snakesNbronies

不要使用CompositeView中的这一点。你不需要包装模板，因为在这种情况下包装只是<optgroup>标签。

改为使用CollectionView，它不呈现包装模板。

对于组＃，使用的OnRender方法


view = Backbone.Marionette.CollectionView.extend({ 
    collection: some_collection, 
    itemView: some_itemview, 
    tagName:'optgroup', 

    onRender: function(){ 
     this.$el.attr("label", "Group 1"); 
    } 

});

来源

2012-12-05 14:03:25

你可以设置视图元素的属性在例如初始化或的OnRender功能，如：

view = Backbone.Marionette.CompositeView.extend({ 
    ... 

    initialize: function() { 
     this.$el.attr('label', 'foobar'); 
    } 
});

或更换初始化：

onRender: function() { 
     this.$el.attr('label', 'foobar'); 
    }

如果你有一个现有的元素，如：

<optgroup id="myGroup" label="Group 1"> 
</optgroup>

您可以设置视图的元素，例如：

view = Backbone.Marionette.CompositeView.extend({ 
    el: $('#myGroup'), 

    ... 
});

来源

2012-12-05 07:41:23 lasse

是视图选项也是这样做的呢？ https://github.com/marionettejs/backbone.marionette/wiki/Passing-custom-options-to-itemview-from-collectionview-or-compositeview – snakesNbronies

如果是这样，你介意提供一个使用它们的例子吗？ – snakesNbronies

刚试过'this。$ el.attr（'label'，this.model。get（'name'））'在初始化函数中，但是当我为视图声明了一个“开始”函数时，我得到了一个引用错误 - 在这个函数中我渲染并显示在一个区域内$ .when（mdvRendered ）。然后（函数（）{ MyApp.modalDropdown.show（mdv）; }）;' – snakesNbronies

德里克和拉塞的回答的组合使我的解决方案。我错过了onRender。以下是未来读者的总结。

的嵌套集合视图的结构：

Collection of Collections --> Collection --> Item 
          --> Collection --> Item 
          --> ... etc.

CollectionOfCollections =

Backbone.Marionette.CollectionView.extend({ 
    collection: myCollectionOfCollections, 
    itemView: Collection <!--this refers to the next Collection view below--> 
});

收集 =

Backbone.Marionette.CollectionView.extend({ 
    collection: myCollection, 
    itemView: ItemView, <!-- again... the next view below --> 
    tagName: 'optgroup',

Nested collections with Backbone.Marionette

<!-- IF YOU ARE PASSING A SIMPLE ARRAY, 
    IT MUST BE CONVERTED TO A REAL COLLECTION FIRST --> 

    initialize: function(){ 
     var xyz = this.model.get('abc'); 
     this.collection = new Backbone.Collection.extend({}); 
    }); 

    onRender: function(){ 

     <!-- Here's where you insert the attribute into the tag --> 

     this.$el.attr('label', this.model.get('name')); 
    } 
    }); 
});

ItemView控件=

ModalDropdownEntryView = TourView.extend({ 
    model: myModel, 
    template: '#myTemplate', 
    tagName: 'option', 
});

来源

2012-12-05 17:31:31 snakesNbronies

Backbone.Marionette - 将变量传递给复合视图标记

回答

相关问题