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

Question

I have a problem - I have a list:

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

This part is static and will never change.

Another button adds a Backbone view to this list without grouping it.

As you know; you need an el tag on a view or at the very least a root tag as I may need to do further event capture on this view. I cannot use a div tag as the resulting html would be invalid, this:

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

(Cannot have div tags amongst those li)

Does anyone know of how I might be able to sneak a root tag without messing the html validation up.

Either that or is there a backbone trick that allows you to have a view linked together without using an el.

I'd also want to be able to add any number of these views - so I'd have a root view rooted to the ol tag and then within that view it would delegate to individual views for each of the li groups and so the problem is that I can't put a tag to group those li tags.

I know you might think it should be a separate list but this is a list of things to do. If they add this new view they have more things to do in the list - thus it makes sense for it to be part of one list.

Thanks for any help - I'm off to make meatballs.

Answer 1

Try this:

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

You could also put class="myBackboneView" on the inner ol .

Answer 2

You can call setElement to set your view's el to a specific element that already exists:

setElement view.setElement(element)

If you'd like to apply a Backbone view to a different DOM element, use setElement , which will also create the cached $el reference and move the view's delegated events from the old element to the new one.

So you can simply do this somewhere convenient (such as initialize or render ):

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

You might need a more specific selector of course.

Demo: http://jsfiddle.net/ambiguous/mTX6K/

You could also set el manually in your view's definition:

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

Demo: http://jsfiddle.net/ambiguous/qk5Tg/1/