如何将Marionette 3 CollectionView渲染到表格列中?

时间:2017-03-06 05:32:48

标签: backbone.js marionette

我目前正致力于使用symfony 1.4和一系列过时技术的遗留程序。最近我们决定将Backbone / Marionette添加到项目中以使事情变得更容易。

我遇到的问题是将集合视图呈现到表格列。该表已经存在并且可以使用超过2k LOC ,这使我无法重写它。

<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 attachHtmlattachBuffer,但无法实施有效的解决方案。

1 个答案:

答案 0 :(得分:1)

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将子项附加到它自己的容器中,并且您需要强制子项在实例化后自行呈现。