0

我有一个问题 - 我有一个清单：

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
</ol>

这部分是静态的，永远不会改变。

另一个按钮将 Backbone 视图添加到此列表中，而不对其进行分组。

如你所知; 您需要一个视图上的 el 标记或至少一个根标记，因为我可能需要在此视图上进行进一步的事件捕获。我不能使用 div 标签，因为生成的 html 将是无效的，这个：

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <div class="myBackboneView">
        <li>List item for first component</li>
        <li>List item for second component</li>
    </div>
</ol>

（这些 li 中不能有 div 标签）

有谁知道我如何能够在不弄乱 html 验证的情况下潜入根标签。

要么，要么有一个主干技巧，允许您在不使用 el 的情况下将视图链接在一起。

我还希望能够添加任意数量的这些视图 - 所以我将有一个根视图植根于 ol 标记，然后在该视图中它将委派给每个 li 组的各个视图，所以问题是我不能放一个标签来对那些 li 标签进行分组。

我知道你可能认为它应该是一个单独的列表，但这是一个要做的事情的列表。如果他们添加了这个新视图，他们在列表中就有更多的事情要做——因此它成为一个列表的一部分是有意义的。

谢谢你的帮助——我要去做肉丸了。

4

2 回答 2

1

尝试这个：

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li class="myBackboneView">
      <ol>
        <li>List item for first component</li>
        <li>List item for second component</li>
      <ol>
    </li>
</ol>

你也可以穿上class="myBackboneView"inner ol。

于 2012-10-29T22:38:18.847 回答
1

您可以调用setElement将视图设置el为已存在的特定元素：

设置元素 view.setElement(element)

如果您想将 Backbone 视图应用到不同的 DOM 元素，请使用setElement，它还将创建缓存$el引用并将视图的委托事件从旧元素移动到新元素。

因此，您可以在方便的地方（例如initialize或render）简单地执行此操作：

this.setElement($('ol'));

当然，您可能需要更具体的选择器。

演示：http: //jsfiddle.net/ambiguous/mTX6K/

您也el可以在视图的定义中手动设置：

el: 'ol' // Or a more specific selector

演示：http: //jsfiddle.net/ambiguous/qk5Tg/1/

于 2012-10-29T22:53:39.173 回答