0

更新 (関連する詳細): この複合ビューは、複合ビューのコレクション内にあります。

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>、tagName として指定する必要があります。

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-->
});
4

3 に答える 3

5

これには 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-05T14:03:25.853 に答える
3

たとえば、initialize または 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-05T07:41:23.820 に答える
2

Derick と Lasse の回答を組み合わせることで、解決策にたどり着きます。それ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',

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'));
     }
   });
});

アイテム ビュー =

ModalDropdownEntryView = TourView.extend({
    model: myModel,
    template: '#myTemplate',
    tagName: 'option',
});
于 2012-12-05T17:31:31.227 に答える