将HTML表的<tbody>元素指定为Backbone.js的Marionette区域
将HTML表的<tbody>元素指定为Backbone.js的Marionette区域
提问于 2012-08-20 18:37:27
问题
使用Backbone.Marrionette.Layout显示一些表格数据。表的<tbody>部分是用于显示Backbone.Marionette.CollectionView的Backbone.Marionette.Region。
我不知道如何使用Marionette的"Regions“来实现这一点，而不通过在<tbody>元素中插入一个额外的HTML元素来破坏表的显示。
示例代码
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>有什么建议吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-08-20 20:10:58
这个布局的目的仅仅是为了方便一个表吗？如果是这样的话，您应该考虑使用CompositeView。
RowView = Marionette.ItemView.extend({
tagName: "tr",
template: ...
});
TableView = Marionette.CompositeView.extend({
template: ...,
childView: RowView,
childViewContainer: "#list-region"
});差不多就是这样。这将将您的所有itemViews呈现给tbody。
Stack Overflow用户
发布于 2016-07-10 15:43:41
木偶3不推荐CompositeView类。相反，一个区域现在可以用内部视图的呈现内容用el覆盖它的选项。
请参阅这个例子以呈现表：
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();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12043157
复制相关文章
相似问题
腾讯云开发者
