Creating a HTML table with Marionette views

Question

I'm trying to output a table to the DOM with Backbone and Marionette Composite views, Collection views and Item views. My code is:

    var TableDataView = Backbone.Marionette.ItemView.extend({
                tagName: "td",
                template: "#data-cell-template",

                initialize: function(){

                        console.log('IN TABLEDATA');
                        console.log('and this.model is ');
                        console.log(this.model);
                } 
    });

    var ScoreRowView = Backbone.Marionette.CompositeView.extend({

                tagName: "tr",
                childView: TableDataView,
                template: "#row-template",

                initialize: function(){

                    console.log('in composite row and this.model is ');
                    console.log(this.model);

                    //var tableDataView = TableDataView();
                },
    });

    // The grid view
    var TableView = Backbone.Marionette.CollectionView.extend({

                tagName: "table",

                template: "#table-template",

                childView: ScoreRowView,

                initialize: function () {
                    console.log('this.collection is');
                    console.log(this.collection);

                },
    });



    // ----------------------------------------------------------------
    // Below this line is normal stuff... models, templates, data, etc.
    // ----------------------------------------------------------------
    var countryData = [
        {
            country: "england",
            scores: [14, 56, 88]
        },
        {
            username: "ireland",
            scores: [56, 23, 90]
        }
    ];


    var Country = Backbone.Model.extend({});

    var CountryCollection = Backbone.Collection.extend({
        model: Country
    });

    var countryList = new CountryCollection(countryData);

    var tableView = new TableView({
        collection: countryList
    });

    tableView.render();
    console.log(tableView.el);
    $("#table").html(tableView.el);

The table should look like this:

Note the cells with the numbers have a lot of custom css and will have click events so these will need to be in their own views.

However, with the above code, the CompositeView is not sending the model to the ItemView. In this fiddle, it does reach the ItemView simply by proving the ItemView as a childView. My jsfiddle is here. How do I pass data to the ItemView?

score 0 · Accepted Answer · answered Aug 07 '15 at 16:29

You need to add to ScoreRowView constructor:

var tdData = [this.model.get('country')].concat(this.model.get('scores')).map(function(item) {
                return {
                    value: item
                }
             })
this.collection = new Backbone.Collection(tdData);

http://jsfiddle.net/sergeir82/t53t5x78/

Creating a HTML table with Marionette views

1 Answers1