15

問題

Backbone.Marrionette.Layoutを使用して、いくつかの表形式のデータを表示します。<tbody>テーブルの一部はBackbone.Marionette.Regionであり、 Backbone.Marionette.CollectionViewを表示することを目的としています。

マリオネットの「リージョン」を使用してこれを行う方法を理解するには、要素内に余分なHTML要素を挿入してテーブルの表示を台無しにする必要があります<tbody>。

サンプルコード

このLayoutように見えます：

Backbone.Marionette.Layout.extend({
    template:...
    regions:{
        list_region: '#list-region'
    }
    onRender:function(){
        var collection = new TheCollection()
        var collectionView = new TheCollectionView({
            collection: collection
        })
        // PROBLEM: The region seems to needs its own HTML element,
        //   and the CollectionView also seems to need its on HTML
        //   element, but as far as I can see, there is only room 
        //    for one element: <tbody>?
        this.list_region.show(collectionView);
});

レイアウトのテンプレートは、テーブル全体で構成されています。

<table>

    <tbody id='list-region'>

    </tbody>

    <tfoot id='footer-region'>
        Some other stuff goes here that is not a collection, so I was able 
        to make the View's 'tagName' property 'tr', which worked fine.
    </tfoot>

</table>

助言がありますか？

4

2 に答える 2

16

このレイアウトの目的は、テーブルを容易にすることだけですか？その場合は、代わりにCompositeViewの使用を検討する必要があります。


RowView = Marionette.ItemView.extend({
  tagName: "tr",
  template: ...
});

TableView = Marionette.CompositeView.extend({
  template: ...,

  childView: RowView,

  childViewContainer: "#list-region"
});

それはほとんどそれです。これにより、すべてのitemViewがtbodyにレンダリングされます。

于 2012-08-20T20:10:58.213 に答える
2

CompositeViewマリオネット3はクラスを廃止しました。代わりに、リージョンは、新しいオプションelを使用して、内部ビューのレンダリングされたコンテンツで上書きできるようになりました。replaceElement

テーブルをレンダリングするには、次の例を参照してください。

var RowView = Marionette.View.extend({
  tagName: 'tr',
  template: '#row-template'
});

var TableBody = Marionette.CollectionView.extend({
  tagName: 'tbody',
  childView: RowView
});

var TableView = Marionette.View.extend({
  tagName: 'table',
  className: 'table table-hover',
  template: '#table',

  regions: {
    body: {
      el: 'tbody',
      replaceElement: true
    }
  },

  onRender: function() {
    this.showChildView('body', new TableBody({
      collection: this.collection
    }));
  }
});

var list = new Backbone.Collection([
  {id: 1, text: 'My text'},
  {id: 2, text: 'Another Item'}
]);

var myTable = new TableView({
  collection: list
});

myTable.render();
于 2016-07-10T15:43:41.507 に答える