如何在Backbone Marionette中显示具有多个子视图的CompositeView [英] How to show CompositeView with multiple children view in Backbone Marionette

问题描述

我有一个CompositeView（一个表），集合中的每个模型都表示为两个表行，模板如下： p>

I have a CompositeView (a table) for which each model in the collection is represented as two table rows, with a template like:

<tr class="row-parent">
    <td>parent info here</td>
</tr>
<tr class="row-child">
    <td>child info here</td>
</tr>

使用这样的ItemView：

With an ItemView like this:

var ItemView = Backbone.Marionette.ItemView.extend({
    template: ItemTmpl
});

即使它们被命名为父和孩子，它们实际上也是同一个成员模型。如果我没有指定tagName，Backbone会将每个视图包装在< div> 中，这也是无效的HTML并且还会破坏布局。

Even though they are named 'parent' and 'child', they are actually peer members of the same model. If I don't specify a tagName, Backbone will wrap each view in a <div> which is both invalid HTML and also breaks the layout.

所以我想，为什么不删除外部< tr> 标签，让Backbone添加它们。所以我将模板更新为：

So I figured, why not remove the outer <tr> tags and let Backbone add them in. So I updated my template to be like:

    <td>parent info here</td>
</tr>
<tr class="row-child">
    <td>child info here</td>

并将视图更新为：

var ItemView = Backbone.Marionette.ItemView.extend({
    template: ItemTmpl,
    tagName: 'tr',
    className: 'row-parent'
});

我希望外部标签与内部标签碎片结合，但Marionette不喜欢那。它只显示了行子。所以我不确定从哪里开始。我正在考虑两个策略但尚未详细介绍。

I was hoping that an outer tag would combine with the inner tag fragments, but Marionette didn't like that. It only showed the row-child. So I'm not sure where to go from here. I'm considering two strategies but haven't gone into much details yet.

覆盖Backbone的任何部分创建额外div而不创建它，或覆盖Marionette的一部分，该部分附加视图以在追加之前删除div。

Override whatever part of Backbone creates the extra div to not create it, or override the part of Marionette which appends the view to remove the div just before appending.

创建一个名为CompositeMultiView的新类型的视图，当然，它会扩展CompositeView并允许你指定第二个ItemView，或者只是一个视图数组，所有这些都将针对给定的每个模型进行渲染。这个计划似乎需要做更多的工作但不那么黑。

Create a new type of view called CompositeMultiView which, naturally, would extend off CompositeView and allow you two specify a second ItemView, or maybe just an array of views, all of which would be rendered for each model given. This plan seems like a lot more work but less hacked.

有没有人有更好的建议，解决方法或具体指针我将如何实现上述两个计划中的任何一个？

Does anyone have any better suggestions, workarounds or concrete pointers as to how I would go about implementing either of the two above plans?

这是一个表格应该是什么样子的模型：

Here is a mockup of what the table should look like:

推荐答案

我一直在努力解决同样的问题，直到我今天终于发现，一个表可以有多个 tbody 标签，每个标签包含多个 tr 标签。

I struggled with that same problem until I finally discovered today, that a table can have multiple tbody tags, each one containing multiple tr tags.

这实际上是答案一个类似的主干问题。

This is actually the answer provided to a similar backbone question.

所以你的 ItemView 将成为：

var ItemView = Backbone.Marionette.ItemView.extend({
    template: ItemTmpl,
    tagName: 'tbody'
});

生成的html：

<table>
  <!-- first item -->
  <tbody>
    <tr class="row-parent">
      <td>parent info here</td>
    </tr>
    <tr class="row-child">
      <td>child info here</td>
    </tr>
  </tbody>
  <!-- second item -->
  <tbody>
    <tr class="row-parent">
      <td>parent info here</td>
    </tr>
    <tr class="row-child">
      <td>child info here</td>
    </tr>
  </tbody>
  ...
</table>

这篇关于如何在Backbone Marionette中显示具有多个子视图的CompositeView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！