Backbone marionette application CompositeView displays <%= text %> instead of model values

Question

I am new to backbone marionette framework. I am designing one view to list the records. My view definition is as follows

define(['App', 'backbone', 'marionette', 'jquery', 'hbs!templates/Dbd_ListItem', 'hbs!templates/Dbd_TestRunsList', 'dataservices/serviceapi'],
function (App, Backbone, Marionette, $, itemTemplate, listTemplate, serviceapi) {
    //$.when(serviceapi.getTestRunsByProject("W6")).then(function (data) {
    //    if (data.length > 0) {
    //        listTestRuns = data;
    //    }
    //});
    App.TestRunModel = Backbone.Model.extend({ defaults: { TestRunId: "#", RunStart: "##-zzz-####", RunDurationInSec: "##.##" } });
    App.TestRun = Marionette.ItemView.extend({
        tagName: "tr",
        template: "#ListItem",
        model: App.TestRunModel
    });

    App.TestRunCollection = Backbone.Collection.extend({
        model: App.TestRunModel,
        comparator: "TestRunId"
    });

    App.CompositeViewTestRun = Marionette.CompositeView.extend({
        tagName: "table",
        className: "table table-hover",
        template: "#List",
        itemView: App.TestRun,
        itemViewContainer: "tbody"
    });

    var listTestRuns = new App.TestRunCollection([
        { TestRunId: "1", RunStart: "16-Mar-2014", RunDurationInSec: "2.45" },
        { TestRunId: "2", RunStart: "17-Mar-2014", RunDurationInSec: "20.45" },
        { TestRunId: "3", RunStart: "18-Mar-2014", RunDurationInSec: "12.50" },
        { TestRunId: "4", RunStart: "16-Mar-2014", RunDurationInSec: "2.45" },
        { TestRunId: "5", RunStart: "17-Mar-2014", RunDurationInSec: "20.45" },
        { TestRunId: "6", RunStart: "18-Mar-2014", RunDurationInSec: "12.50" }
    ]);

    return new App.CompositeViewTestRun({
        //model: App.TestRunModel,
        collection: listTestRuns
    });
});

& My Dbd_ListItem.html template contains following html code

<td><%= TestRunId %></td>
<td><%= RunStart %></td>
<td><%= RunDurationInSec %></td>

Now when I show my composite view with following statement App.mainRegion.show(DashboardView);

it gets rendered as follows ,

and when I add following html code to my index page

<script type="text/template" id="ListItem">
    <td><%= TestRunId %></td>
   <td><%= RunStart %></td>
   <td><%= RunDurationInSec %></td>
</script>
<script type="text/template" id="List">
    <thead>
      <th>Run ID</th>
      <th>Start Time</th>
      <th>Duration (Sec.)</th>                
    </thead>
    <tbody></tbody>
</script>

and update my ItemView & Composite definition to update template value as

For ItemView

App.TestRun = Marionette.ItemView.extend({
            tagName: "tr",
            **template: "#ListItem"**           
        });

& For CompositeView

App.CompositeViewTestRun = Marionette.CompositeView.extend({
            tagName: "table",
            className: "table table-hover",
            **template: "#List",**
            itemView: App.TestRun,
            itemViewContainer: "tbody"
        });

Then app gets rendered correctly see output here

I am unable to figure out whats going wrong with external .html template file.

can anybody point out the mistake?

Thanks In Advance

Mike Stapp Mike Stapp · Accepted Answer · 2014-03-19T11:50:19

There are two issues here. First, in the top listing, you have template properties set to jQuery selectors like template: "#ListItem" and template: "#List". Those don't work because, initially, your templates weren't in your index page; they were in separate template files.

Change those properties to use to the template parameters in your module's callback function:

    App.TestRun = Marionette.ItemView.extend({
        template: itemTemplate,
        ...
    });

    App.CompositeViewTestRun = Marionette.CompositeView.extend({
        template: listTemplate,
        ...
    });

Second, your define statement says you're using Handlebars templates (the hbs! plugin), but your templates are actually Underscore-style templates (e.g. <td><%= TestRunId %></td>). Change your templates to use handlebars expressions instead, like <td>{{ TestRunId }}</td>.

Backbone marionette application CompositeView displays <%= text %> instead of model values

1 Answers