Question

我遇到了问题 - 我有一个清单：

<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标签进行分组。

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

感谢您的帮助 - 我要去做肉丸了。

Answer 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"放在内部ol。

Answer 2

您可以致电setElement将您的观点el设置为已存在的特定元素：

setElement 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/

骨干视图作为无序或有序的html列表的一部分

2 个答案: