什么是覆盖木偶复合视图渲染的正确方法答案

【问题标题】：What is the correct way to override Marionette compositeview render什么是覆盖木偶复合视图渲染的正确方法
【发布时间】：2015-06-18 06:51:18
【问题描述】：

我正在使用 Marionette 的复合视图显示一个表格视图。复合视图的模板有一个 tbody，其首字母显示加载动画 gif。

现在，当调用渲染方法时，我想删除这个初始行，然后附加集合获取的结果。然而，Marionette 的默认渲染实现似乎附加到了 tbody。

我的项目视图的项目模板：

<td><input type="checkbox" class="checkboxContact" id="<%-id %>"/></td>
<td><%-name %></td>
<td> <%-msisdn %></td>
<td> <%-email %></td>
<!--
<td> <%-address %></td>
<td> <%-last_modified_time %></td>-->
<td>
  <i rel="tooltip" class="fa fa-pencil-square-o actions"  id="editIcon" title="edit"></i>
  <i rel="tooltip" class="fa fa-trash-o actions" title="delete"></i>
</td>

重写的渲染方法，如下。

render: function() {
  if (this.collection.size() <= 0) return;

  this.$el.html(this.template((this.collection.toJSON()));
  return this;
}

我也试过

render: function() {
  if (this.collection.size() <= 0) return;

  this.$el.html(this.template({
    collection: this.collection.toJSON()
  }));
  return this;
}

这些都不起作用。

【问题讨论】：

标签： backbone.js marionette

【解决方案1】：

我认为您不应该覆盖您的渲染。 Marionette 知道如何渲染事物。我会考虑改变你实现微调器的方式。

您可能希望在集合同步后将微调器放在 onShow 并关闭它 https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.compositeview.md#events-and-callbacks

当集合更新时，您的视图将重新呈现。你可以听 before:render:collection 如果您愿意，可以在该点清除该行。

【讨论】：

【解决方案2】：

如果你使用的是 CompositeView，你可以定义：

childViewContainer: "tbody"

在复合视图中，内容应该被替换。

此外，当您使用复合视图时，您无需手动调用/定义渲染。只需将 Backbone 集合传递给视图，如下所示：

var compview = new CompView({ collection: bb_collection });

然后使用区域渲染它：

var region = new Marionette.Region({el: "#somediv"}); 
region.show(compview);

【讨论】：