指定HTML表的< tbody>元素作为Marionette中Backbone.js的一个区域 [英] Specify an HTML table's <tbody> element as a region in Marionette for Backbone.js

问题描述

问题

使用 Backbone.Marrionette.Layout 提供一些表格数据。该表的< tbody> 部分是 Backbone.Marionette.Region ，用于显示 Backbone.Marionette.CollectionView 。

Using a Backbone.Marrionette.Layout to present some tabular data. The <tbody> portion of the table is a Backbone.Marionette.Region that is meant to display a Backbone.Marionette.CollectionView.

我无法弄清楚如何使用Marionette的区域通过在< tbody> 元素中插入额外的HTML元素而不会弄乱表格显示。

I can not figure out how to do this using Marionette's "Regions" without messing up the table display by inserting an extra HTML element inside the <tbody> element.

示例代码

布局看起来像这样：

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

布局模板包含整个表格：

The template for the Layout comprises the entire table:

<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>

有什么建议吗？

推荐答案

此布局的目的是否仅仅是为了方便表格？如果是这样，你应该看一下使用CompositeView。

Is the intent of this layout solely to facilitate a table? If so, you should look at using a CompositeView instead.

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

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

  childView: RowView,

  childViewContainer: "#list-region"
});

这就是它。这会将所有itemView渲染到tbody。

That's pretty much it. This will render all of your itemViews in to the tbody.

这篇关于指定HTML表的< tbody>元素作为Marionette中Backbone.js的一个区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！