Backbone.js 主干木偶网应用程序CompositeView显示<；%=文本%>；而不是模型值

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

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模板包含以下html代码

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

&用于合成视图

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

然后应用程序被正确渲染，请参见输出

我无法找出外部.html模板文件出了什么问题

有人能指出错误吗

---

提前感谢

这里有两个问题。首先，在上面的列表中，您将

template

属性设置为jQuery选择器，如

template:“#ListItem”

和

template:“#List”

。这些都不起作用，因为最初，你的模板不在你的索引页面中；它们位于单独的模板文件中

将这些属性更改为用于模块回调函数中的模板参数：

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

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

---

其次，您的

define

语句说您正在使用把手模板（hbs！插件），但您的模板实际上是下划线样式的模板（例如

）。将模板改为使用handlebar表达式，如

{{TestRunId}

谢谢您的回复，我认为问题在于模板没有预编译。因此，根据您的说法，我为ItemView和CompositeView添加了handlebar.Compile（）。但是现在它在lexer选项的下一个函数的handlebar.js中给了我错误，在第433行的语句tempMatch=this.\u input.match（this.rules[rules[i]]）；这么说。_input.match不是一个函数。你能纠正这个错误吗？对不起，之前没有注意到这一点；我被hbs的使用甩了define语句中的code>模板插件。这意味着要将其预编译为把手模板，但您的模板实际上是下划线样式模板。将模板更改为使用Handlebar表达式，如

{{TestRunId}

，从视图中删除显式的

Handlebar.compile（）

调用，它应该可以工作。嘿，谢谢，这在一定程度上帮助我解决了问题并澄清了我的概念。你们能更新你们的答案吗？这样我就可以把它标记为答案了；很乐意帮忙。我刚刚更新了答案。

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

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

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