CODEWITHSUNDEEP
javascripthtmlbackbone.jsmarionette
Java Questions
Java Questions

Reputation: 7953

How to construct template for Composite view Dynamically

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.

Upvotes: 0

Views: 745

Answers (2)

Java Questions
Java Questions

Reputation: 7953

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

Upvotes: 0

Ingro
Ingro

Reputation: 2841

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>
<% }); %>

Upvotes: 1

Related Questions