3

我正在使用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 被重建，但事件处理程序没有被重新附加/

有谁知道为什么会发生这种情况？

4

1 回答 1

1

虽然我不知道确切的原因，但您的设置中有一些有趣的东西让我认为这可能是问题的一部分。

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

错误的 HTML 输出？

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

这将产生无效的 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/

于 2012-05-22T17:04:58.470 回答