CompositeView and/or CollectionView won't render table headers

Question

I'm having some problems rendering headers in a composite or collection view. I tried both, but this simply won't render.

Let me show you a little bit of my code:

// composite view
define(function(require) {

    var BusinessTableTemplate = require("text!templates/BusinessTableTemplate.html");
    var BusinessRowView = require("views/BusinessRowView");
    var Marionette = require("marionette");

    return BusinessTableView = Marionette.CompositeView.extend({

        tagName: "table",
        className: "table table-hover",
        template: BusinessTableTemplate,
        itemView: BusinessRowView,
        appendHtml: function(collectionView, itemView){
            collectionView.$("tbody").append(itemView.el);
        }

    });

});

// BusinessTableTemplate
<script type="text/template">

    <thead>
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Building</th>
            <th>Phone</th>
            <th>Website</th>
            <th>Categories</th>
        </tr>
    </thead>
    <tbody></tbody>

</script>

// itemview
define(function(require) {

    var BusinessRowTemplate = require("text!templates/BusinessRowTemplate.html");
    var Marionette = require("marionette");

    return BusinessRowView = Marionette.ItemView.extend({

        template: BusinessRowTemplate,
        tagName: "tr"

    });

});

// BusinessRowTemplate
<script type="text/template">

    <td>
        <%= name %>
    </td>
    <td>
        <% if (address) { %>
            <%= address %>
        <% } else { %>
            NA
        <% } %>
    </td>
    <td>
        <% if (building) { %>
            <%= building %>
        <% } else { %>
            NA
        <% } %>
    </td>
    <td>
    <td>
        <% _.each(phones, function(phone) { %>
            <span class="label label-default label-info"><%= phone %></span>
        <% }); %>
    </td>
    <td>
        <% if (website) { %>
            <%= website %>
        <% } else { %>
            NA
        <% } %>
    </td>
    <td>
        <% _.each(tags, function(category) { %>
            <span class="label label-default label-info"><%= category %></span>
        <% }); %>
    </td>
    <td>
        Ações
    </td>
</script>


// signal or event where I render the view
vent.on("search:seeAll", function(){
  if (self.results) {
    var businessDirectoryView = new BusinessDirectoryView();
    self.layout.modals.show(businessDirectoryView);
    var resultCollection = new Businesses(self.results, {renderInMap: false});
    var businessTableView = new BusinessTableView({
      collection: resultCollection
    });
    $("#businesses-container").html(businessTableView.render().$el);
  }
});

I followed a tutorial somewhere, but they did not specified headers for the table.

A little help here to render this?

Thanks!

Answer 1

What is the Marionette JS version you are using?

Here is a fiddle using the version 2.4.1 (latest available) and it is working:

https://jsfiddle.net/aokrhw1w/2/

There are some changes in the composite view with previous versions, the 'itemView' was changed to 'childView'.

var BusinessTableView = Marionette.CompositeView.extend({
   tagName: "table",
   className: "table table-hover",
   template: '#BusinessTableTpl',
   childView: BusinessRowView,
   childViewContainer: "tbody",
   appendHtml: function (collectionView, itemView) {
                console.log('append');
                 this.$("tbody").append(itemView.el);
   }
});

Hope this solves your problem.