Question

I have a following scenario.

• A list of table rows.

...
<tr><td><a href="#" class="item" id="1">get items</a></td></tr>
<tr><td><a href="#" class="item" id="2">get items</a></td></tr>
<tr><td><a href="#" class="item" id="3">get items</a></td></tr>
...

An entire table is created from “TableView” Backbone object and each row of the table is created from “TableRowView” Backbone object.

• When clicking on the “get items” link in each row, I request the server to grab a list of objects. These objects are stored in its own model and collection. In turn, they have their own view object “TableRowListView”.

Up to this point, everything works fine. What I want to do is to get the “el” of the current “TableRowListView” returned and append it to the table row that was clicked. So the end result would look something like

...
<tr><td>
    <a href="#" class="item" id="1">get items</a>
    <ul>
      <li>table row list object</li>
      <li>table row list object</li>
    </ul>
  </td></tr>
<tr><td><a href="#" class="item" id="2">get items</a></td></tr>
<tr><td><a href="#" class="item" id="3">get items</a></td></tr>
...

So I guess I’m having trouble trying to “insert” a view object into another view.

Answer 1

If you look at the free chapter on collection view from the new Recipes with Backbone book you’ll see code like this:

addOne: function(model) {
  view = new Views.Appointment({model: model});
  view.render();
  $(this.el).append(view.el);
  model.bind('remove', view.remove);
}

The author is creating a sub-view for an item and then appending the view’s element to the element for the containing view. Is that what you’re after?

If so then I’d recommend that chapter (which you can download in PDF form from the website) and see if it clarifies things further. It’s a short read (six pages I think).