Question

我正在使用backbone.marionette并具有以下CollectionView ItemView组合：

  PlansListItemView = PlansApp.ItemView.extend
    tagName: "tbody"
    template: "#plansRow"    
    events:
      'click th.expander': 'expandDocuments'

    expandDocuments: (e) =>
      # do stuff

  PlansCollectionView = PlansApp.CollectionView.extend
    tagName: "table"
    itemView: PlansListItemView

我从嵌入在页面上的json的初始集合创建视图。事件哈希中的事件完美无缺。

然后在下拉列表更改事件中，我在集合上调用fetch（）来检索新的对象集合。 DOM会重建，但事件处理程序不会重新附加/

有人知道为什么会这样吗？

Answer 1

虽然我不知道确切原因，但你的设置中有一些有趣的东西让我觉得它可能是问题的一部分。

注意：根据您发布的内容，我对您的代码和模板做了一些巨大的假设。可能发生的任何事情都会使我所说的无效。但是，鉴于您发布的内容，以下是我对如何组织此代码的想法，这可能有助于清理您看到的问题。

HTML输出错误？

您将每个项目视图设置为<tbody>标记，但看起来您有一些<th>标记由该视图呈现 - 至少基于您已配置的事件。< / p>

这会产生无效的HTML，例如：

<table>
  <tbody>
    <th></th>
  </tbody>
</table>

如果没有看到#plansRow的模板，很难说，但我猜想会出现类似的问题。

问题是集合视图不擅长生成表。它们可以很好地生成表中的行和表标记包装器，但是它们将无法获得表头，页脚，正文或其他标签，因为集合视图不会呈现模板他们自己的。他们只是创建一个包装器标签，然后渲染集合中的每个子项。

要解决此问题，请使用CompositeView，它也是一个CollectionView，它也会呈现自己的模板。

具有复合视图的更好的表结构

使用Marionette构建表的更合适的设置是使用CompositeView作为父项，并让每个项视图呈现tr标记。例如：


RowView = Backbone.Marionette.ItemView.extend({
  template: "#row-template",
  tagName: "tr"
});

TableView = Backbone.Marionette.CompositeView.extend({
  template: "#table-template",
  tagName: "table",

  appendHtml: function(cv, iv){
    cv.$("tbody").append(iv.el);
  }
});

这将使用复合视图设置<table>。然后，该视图的模板将包含用于定义表的相应<thead><th>...</th></thead><tbody></tbody>标记。

行视图呈现为<tr>标记，并填充所需的任何数据，包括相应的<td>标记。

复合视图上的appendHtml方法处理将每个项目视图插入到父复合视图的<tbody>标记中。

你可以在这个JSFiddle中看到这个的实时版本：http://jsfiddle.net/derickbailey/me4NK/

和博客文章一起使用CompositeView的这个和其他用途，在这里：http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/

通过提取刷新事件后，不会触发骨干事件

1 个答案:

HTML输出错误？

具有复合视图的更好的表结构