How to construct template for Composite view Dynam

Question

Desired output :

  <script id="table-template" type="text/html">
      <table>
        <thead>
           ADD THE HEADER NAMES HERE DYNAMICALLY,
        </thead>        
        <!-- insert collection items -->
        <tbody></tbody>
      </table>
    </script>

I am trying to get the above template generated, the problem here is the header names

Portfolio Amount Exchange Amount in Fccy Quantity Account

like the above it would be the fixed one, the user can give any number of header names.

This is the Code i have done :

Grid.Hexgrid = Backbone.Marionette.CompositeView.extend({
         template: "#header", 
         initialize : function (options){
           this.header = options.header;
        },
        onRender : function(){
            ADD THE HEADER INFORMATION HERE WHICH WILL COME UNDER <THEAD></THEAD>
        },

      appendHtml: function(collectionView, itemView, index){
        collectionView.$("tbody").append(itemView.el);
      }
    });

I have given my comments in BOLD letter. would somebody help me to complete this Please.

Answer 1

You don't need to set the template properties in your view, as the function getTemplate would do that for you.

Anyway to generate your header dinamically I suggest you another route, to just pass your header's data to your template like that:

serializeData: function() {
    var data = Backbone.Marionette.ItemView.prototype.serializeData.apply(this, arguments);
    data.header = this.header;
    return data;
}

And then in your template you could do:

<% _.each(header,function(h){ %>
    <div class="span2"><%= h %></div>
<% }); %>

Answer 2

It is done using the following way :

onRender : function() {
            headerInformation = this.header;
            for ( var column in headerInformation) {
                this.$("tr").append("<th>" + headerInformation[column] + "</th>");
            }
        }

Best Regards