Question

Has anyone had any success using a vertical table column as a view ‘el’ using Backbone.js? Since tables are row-based, using a table row as the DOM container associated with the view is trivial. However, the layout I’m required to implement is vertical, so a table column would be the ‘el’ of my design, but table columns don’t have a similar container element since table layout is horizontal.

So far, I haven’t been able to successfully create child views for the table columns, which means I’m tying data to my DOM in order to retrieve and manipulate table columns. My design has gotten much more complex, which is causing me to reevaluate the original approach in the hope that there is a better way to manage this scenario through child views. Any ideas?

Answer 1

You could take advantage of the fact that

• jQuery objects are lists of DOM elements
• Backbone does not require a unique DOM node (at least as far as I can tell)
• this.$el in a view can then be whatever nodes you want

With that in mind, you could render your table in one go (see BackboneJS Rendering Problems, it’s faster and in your case probably much easier) and then apply your subviews on the table cells associated with the model. I went with a class name for selection but a selector on the nth element of each row should work.

Template

<table>
    <thead>
        <tr>
            <th></th>
            <% _(children).each(function(model) { %>
                <th><%= model.id %></th>                
            <% }); %>
        </tr>
    </thead>
    <tbody>
    <% _(properties).each(function(prop) { %>
        <tr>
            <td><%= prop %></td>
            <% _(children).each(function(model) { %>
                <td class="<%= model.cid %>"><% print(model[prop]); %></td>
            <% }); %>
        </tr>
    <% }); %>
    </tbody>
 </table>

View

ListView = Backbone.View.extend({
    initialize: function(opts) {
        this.options = opts;
    },
    render: function () {
        var data, html, $table, template = this.options.template;

        data = this.collection.map(function (model) {
            return _.extend(model.toJSON(), {
                cid: model.cid
            });
        });

        html = this.options.template({
            children: data,
            properties: ['id', 'name']
        });

        $table = $(html);

        this.collection.each(function (model, ix) {
            var $el = $table.find("." + model.cid),
                subview = new ItemView({
                    el: $el,
                    model: model
                });
        });

        this.$el.empty();
        this.$el.append($table);

        return this;
    }
});

As you can check in this demo http://jsfiddle.net/nikoshr/psasT/12/, each column is handled by a dedicated view.