如何将 Marionette 3 CollectionView 渲染到 table 列中?
How to render Marionette 3 CollectionView into a table column?
我目前正在使用 symfony 1.4 和一堆过时的技术开发一个遗留程序。最近我们决定将 Backbone/Marionette 添加到项目中以使事情变得更容易一些。
我面临的问题是将 集合视图 渲染到 table 列 中。 table 已经存在并且可以使用 超过 2k LOC,这使得我无法重写它 ATM。
<table>
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
<th>...</th>
<th></th> <!-- This is the column -->
<th>Total price</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
除评论指定的列外,所有其他列都已呈现到页面中。我已按照文档 Marionette attachHtml and attachBuffer 进行操作,但无法实施可行的解决方案。
https://jsfiddle.net/cbzs67ar/
var collection = new Backbone.Collection([
{ id: 1, text: 'one' },
{ id: 2, text: 'two' },
{ id: 3, text: 'three' },
{ id: 4, text: 'four' },
{ id: 5, text: 'five' },
{ id: 6, text: 'six' },
{ id: 7, text: 'seven' }
])
var MyChildView = Mn.View.extend({
initialize() {
this.render();
},
template: _.template(': <%- text %>')
});
var CollectionView = Mn.CollectionView.extend({
el: '.tbody-hook',
childView: MyChildView,
buildChildView(model, ChildView) {
var view = new ChildView({
el: '.td-' + model.id,
model: model
});
return view;
},
attachHtml: _.noop,
attachBuffer: _.noop
});
var myRegion = new Marionette.Region({ el: '#some-region' });
myRegion.show(new CollectionView({ collection: collection }));
使用collectionview 通过列选择器管理预呈现的子视图。您需要禁止 collectionview 将子项附加到它自己的容器中,并且您需要强制子项在实例化后自行呈现。
我目前正在使用 symfony 1.4 和一堆过时的技术开发一个遗留程序。最近我们决定将 Backbone/Marionette 添加到项目中以使事情变得更容易一些。
我面临的问题是将 集合视图 渲染到 table 列 中。 table 已经存在并且可以使用 超过 2k LOC,这使得我无法重写它 ATM。
<table>
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
<th>...</th>
<th></th> <!-- This is the column -->
<th>Total price</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
除评论指定的列外,所有其他列都已呈现到页面中。我已按照文档 Marionette attachHtml and attachBuffer 进行操作,但无法实施可行的解决方案。
https://jsfiddle.net/cbzs67ar/
var collection = new Backbone.Collection([
{ id: 1, text: 'one' },
{ id: 2, text: 'two' },
{ id: 3, text: 'three' },
{ id: 4, text: 'four' },
{ id: 5, text: 'five' },
{ id: 6, text: 'six' },
{ id: 7, text: 'seven' }
])
var MyChildView = Mn.View.extend({
initialize() {
this.render();
},
template: _.template(': <%- text %>')
});
var CollectionView = Mn.CollectionView.extend({
el: '.tbody-hook',
childView: MyChildView,
buildChildView(model, ChildView) {
var view = new ChildView({
el: '.td-' + model.id,
model: model
});
return view;
},
attachHtml: _.noop,
attachBuffer: _.noop
});
var myRegion = new Marionette.Region({ el: '#some-region' });
myRegion.show(new CollectionView({ collection: collection }));
使用collectionview 通过列选择器管理预呈现的子视图。您需要禁止 collectionview 将子项附加到它自己的容器中,并且您需要强制子项在实例化后自行呈现。