Question

I have an app which shows boxes within boxes. Each box model has a method ‘children’ which returns any boxes that are shown within the box. What I want to do is click a button and have the children rendered as a table with their properties listed in several columns.

I’m not really sure how to do this. I think the Underscore template might look something like this:

<table class='list-items-template'>
          <tr>
          <td><%= this.model.ITSCHILDX.get('image') %>       </td>
          <td><%= this.model.ITSCHILDX.get('title') %>       </td>
          <td><%= this.model.ITSCHILDX.get('description') %> </td>
          </tr>
      </table>

But then within the Box view, I need some way of saying that each child should be inserted within the table and each of its attributes should be represented. Help is greatly appreciated.

Answer 1

Not sure if I’m understanding the setup correctly but you have a BoxModel.

BoxModel = Backbone.Model.extend({
    defaults: {
        'image':string,
        'title':string,
        'description':string
    }
});

And a BoxModel can contain children BoxModels?

boxModel.children = new Collection(); // of box models?

And you want to iterate through the children collection and represent each model as a table row?

If this is what you want here is what I’d do. A box model is represented by a BoxView which is a table and its children are essentially represented as rows. So we define it as this:

BoxView = Backbone.View.extend({
    tagName: 'table',
    className: 'list-items-template', // I just used this name to connect it with your ex.
                                      // I'd probably change it to like, box-table
    template: _.template('<tr>
        <td><%= image %>       </td>
        <td><%= title %>       </td>
        <td><%= description %> </td>
        </tr>'),
    initialize: function() {
        // Note: We've passed in a box model and a box model has a property called
        // children that is a collection of other box models
        this.box = this.model;
        this.collection = this.box.children // Important! Assumes collection exists.
    },
    render: function() {
        this.$el.html(this.addAllRows());
        return this;
    },
    addAllRows: function() {
        var that = this;
        var rows = '';
        this.collection.each(function(box) {
            rows += that.template(box.toJSON());
        });
        return rows;
    }
});


// This assumes that whatever BoxModel you have instantiated, it has a property called
// children that is a collection of other BoxModels. We pass this in.

// Get the party started
var myBoxTable = new BoxView({
    'model': someBoxModel  // Your box model, it has a collection of children boxModels
});

// Throw it into your page wherever.
$('#placeToInsert').html(myBoxTable.render.el());

Also note, that this basically means your children boxModels are represented visually in this example. If each child (row) had to have some functionality, instead of just using the template to write out a visual representation, I’d use the addAllRows() method to instantiate a second type of BoxModel View. A view that is a table row and has more functionality like events delegated properly.