Backbone牵线木偶应用程序CompositeView显示＆lt;％= text％＆gt;而不是模型值

Question

我是骨干牵线木偶框架的新手。我正在设计一个视图来列出记录。我的观点定义如下

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

＆安培;我的Dbd_ListItem.html模板包含以下HTML代码

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

现在，当我使用以下语句显示我的复合视图时 App.mainRegion.show（DashboardView）;

它呈现为，

当我将以下html代码添加到我的索引页面

时

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

并更新我的ItemView＆amp;用于将模板值更新为

的组合定义

对于ItemView

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

＆安培;对于CompositeView

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

然后app正确呈现，请参阅输出

我无法弄清楚外部.html模板文件出了什么问题。

任何人都可以指出错误吗？

提前致谢

Answer 1

这里有两个问题。首先，在顶部列表中，您将template属性设置为jQuery选择器，如template: "#ListItem"和template: "#List"。这些不起作用，因为最初，您的模板不在索引页面中;它们位于单独的模板文件中。

将要使用的属性更改为模块的回调函数中的模板参数：

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

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

其次，您的define声明表示您正在使用Handlebars模板（hbs!插件），但您的模板实际上是Underscore风格的模板（例如<td><%= TestRunId %></td>）。将模板更改为使用手柄表达式，例如<td>{{ TestRunId }}</td>。