如何在Marionette 3+中实现弃用的CompositeView功能？

Question

正如最新的Marionette文档中所述:

CompositeView已弃用.您应该使用该replaceElement选项Region.show并将其渲染CollectionView到a内的区域View以实现此功能.

我仍然无法理解CompositeView现在应该如何实现功能.

以前,CompositeView非常适合使用这样的模板:

<script id="table-template" type="text/html">
<table>
  <% if (items.length) { %>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Description</th>
    </tr>
  </thead>
 <% } %>

  <tbody></tbody>

  <tfoot>
    <tr>
      <td colspan="3">some footer information</td>
    </tr>
  </tfoot>
</table>

new MyCompositeView({
  template: "#table-template",
  templateContext: function() {
    return { items: this.collection.toJSON() };
  }
  // ... other options
});

如果我们决定使用LayoutView而不是CompositeView那时我们需要手动编写许多事件绑定(例如根据集合中的项目数显示/隐藏表头).这使事情变得更难.

没有任何干净而不复杂的生活方式CompositeView吗？

---

感谢您的任何帮助或建议.

Answer 1

看起来 Marionette 3 将去掉一些概念，使框架整体更简单，更容易理解。

Marionette.View 3 将包含 ItemView 和 LayoutView 的功能。CompositeView 已被弃用，转而只使用 RegionManager，它现在包含在 View 中。

v2 --> v3
View -> AbstractView  
ItemView, LayoutView -> View

这是一个快速示例应用程序：

v2 --> v3
View -> AbstractView  
ItemView, LayoutView -> View

var color_data = [ { title:'red' }, { title:'green' }, { title:'blue' } ];

var Color = Backbone.Model.extend({
  defaults: { title: '' }
});

var Colors = Backbone.Collection.extend({
  model: Color
});

var ColorView = Mn.View.extend({
  tagName: 'tr',
  template: '#colorTpl'
});

var ColorsView = Mn.CollectionView.extend({
  tagName: 'tbody',
  childView: ColorView
});

var AppView = Mn.View.extend({
  template: '#appTpl',
  templateContext: function(){
    return {
      items: this.collection.toJSON()
    };
  },
  ui: {
    input: '.input'
  },
  regions: {
    list: {
      selector: 'tbody',
      replaceElement: true
    },
  },
  onRender: function(){
    this.getRegion('list').show(new ColorsView({
      collection: this.collection
    }));
  },
  events: {
    'submit form': 'onSubmit'
  },
  onSubmit: function(e){
    e.preventDefault();
    this.collection.add({
      title: this.ui.input.val()
    });
    this.ui.input.val('');
  }
});

var appView = new AppView({
  collection: new Colors(color_data)
});
appView.render().$el.appendTo(document.body);