Trunk view el as table column

Has anyone had any success using a vertical table column as "el" using Backbone.js? Since tables are row-based, using a table row as the DOM container associated with a view is trivial. However, the layout I need to implement is vertical, so the table column will be "el" in my design, but the table columns do not have a similar container element as the table layout is horizontal.

So far, I have not been able to successfully create child views for the table columns, which means I bind data to my DOM in order to fetch and process the table columns. My design has become a lot more complex, which makes me re-evaluate the original approach in the hope that there is a better way to control this scenario through childish views. Any ideas?

+3


source to share


2 answers


You could take advantage of the fact that

  • JQuery Objects are lists of DOM elements.
  • The backbone does not require a unique DOM node (at least as far as I can tell)
  • this.$el

    the view can have any nodes you want

With that in mind, you could render your table in one go (see BackboneJS Rendering Problems , it's faster and probably much easier in your case) and then apply subviews on the table cells associated with the model. I went with the class name to select, but the selector on the nth element of each line 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 this demo http://jsfiddle.net/nikoshr/psasT/12/ each column is handled by a dedicated view.

+2


source


I cannot think of a direct solution to your problem. Having multiple species separates the element <table>

as it el

sounds like a potential nightmare.

How about attacking the problem from a different angle, rather than using an HTML table, by building the table columns from floated elements <div>

and bind views to those elements? Something like:

<div class="faux-table">
  <div class="faux-column">
    <div class="faux-header">Col 1</div>
    <div>Foo</div>
    <div>Bar</div>
    <div>Baz</div>
    <div>Qux</div>
  </div>
  <div class="faux-column">
    <div class="faux-header">Col 2</div>
    <div>Foo</div>
    <div>Bar</div>
    <div>Baz</div>
    <div>Qux</div>
  </div>
</div>

      

And the CSS rule:

.faux-table > div.faux-column {
    float:left;
}

      



A working sample in this script . This solution is of course far from perfect, because if you have different sized sizes you will have to implement the string size yourself. But if you need to get the table rendered by Backbone views, this is probably the easiest way from a JS perspective.

Edit: Actually, I think a much better and less brittle solution is to use table elements <td>

as columns and just inline the rows as <div>

without any CSS float hacks:

<table>
    <tr>
        <td class="faux-column">
            <div class="faux-header">Col 1</div>
            <div>Foo</div>
            <div>Bar</div>
            <div>Baz</div>
            <div>Qux</div>
        </td>
        <td class="faux-column">
            <div class="faux-header">Col 2</div>
            <div>Foo</div>
            <div>Bar</div>
            <div>Baz</div>
            <div>Qux</div>
        </td>
    </tr>
</table>

      

Revised version in this script .

0


source







All Articles