javascript - 将 subview 附加到与父 View 相同的 block

Question

不要被我问题的长度吓倒，一般来说，问题是:

如何附加 CompositeView 的孙子与孙子 parent 的同一街区？

childViewContainer的CompositeView足够聪明，可以识别自己模板中存在的选择器。但是，一个 child CompositeView想要在父模板中使用选择器作为 childViewContainer 的 View 的因为它自己的 subview 会导致 Backone 抛出错误。问题是第一个子级中的“childViewContainer”不知道查看该选择器的父模板。因此，如果我指定祖 parent 模板中存在的选择器，孙子将不会有有效的 childViewContainer附加到。

<小时/>

这篇文章的其余部分详细阐述了我的特定问题。如果您有任何可以解决我的特定问题的想法，那就太好了。但如果您有上述问题并找到了解决方案，我会将其标记为答案。

我有一个嵌套模型的集合。模型看起来像这样:

var aModel =
   {
      prop1.1: value1.1,
      prop1.2: value1.2,
      prop1.3: [ 
         {
            prop2.1.1: value2.1.1,
            prop2.1.2: value2.1.2 
          },
         . 
         . 
         . 
         {
            prop2.N.1: value2.N.1,
            prop2.N.2: value2.N.2 
         }
      ]
    }

顶层是 CompositeView与以下内容

<table>
    <thead>
        <tr>
            <th>
                View1.HeadRow.Column1
            </th>
            <th>
                View1.HeadRow.Column2
            </th>
            <th>
                View1.HeadRow.Column3
            </th>
        </tr>
    </thead>
    <tbody class="tbody1">
    </tbody>
</table>

这个 View ，称之为View1 ，产生 CompositeView children ，比如说View2 children ，这将呈现 tr el 。 View1 中的 childContainer ，自然就是它的<tbody> (即上面的模板中)。

“View2”将渲染子项 ItemView s，称它们为 View3 children.查看3 children render tr el`也是如此。

此时我的方案意味着嵌套结构( View1 > View2 > View3 )。我想要完成的是 View2和View3应该呈现为 sibling 。为了说明结果应如下所示:

<table>
    <thead>
        <tr>
            <th>
                View1.HeadRow.Column1
            </th>
            <th>
                View1.HeadRow.Column2
            </th>
            <th>
                View1.HeadRow.Column3
            </th>
        </tr>
    </thead>
    <tbody class="tbody1">
        <tr>
            <td rowspan="N+1">
                View2.Row1.Column1
            </td>
        <tr>
            <td>
                View3.Row2.Column2
            </td>
            <td>
                View3.Row2.Column3
            </td>
        </tr>
          .
          .
          .
        <tr>
            <td>
                View3.RowN.Column2
            </td>
            <td>
                View3.RowN.Column3
            </td>
        </tr>
    </tbody>
</table>  

具有两个模型的渲染示例如下所示:

我认为渲染的关键View3作为 View2 的 sibling 将分配 View3与 View2 相同的 childViewContainer ，即

childViewContainer: 'tbody.tbody1'

在 View2看法 View2 View 正在生成 View3 。然而，'tbody.tbody1'选择器定义在View1中模板。因此，当时View3 children 正在被渲染， 'tbody.tbody1'选择器不在 DOM 中。我如何附加 View3与 View2 在同一街区的 child children ？

Answer 1

如果您想执行您刚才解释的操作，您将需要破解 CompositeView.render() 函数。您最好希望为这个特定用例创建自己的特殊 Marionette.CompositeView 类。

其核心 CompositeView 并不是为了能够完成您所描述的事情而设计的。

更多关于CompositeView by Derick Bailey, the author behind Marionette .