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.

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

回答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

来源：https://stackoverflow.com/questions/17672838/how-to-construct-template-for-composite-view-dynamically

标签

javascript

html

backbone.js

marionette