Backbone牽線木偶應用CompositeView顯示<%= text %>而不是模型值

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控件&複合定義更新模板值

對於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" 
     }); 

然後應用程序被渲染正確地看到輸出

我無法弄清楚什麼與外部的.html模板文件會出錯。

有人可以指出錯誤嗎？

在此先感謝

Answer 1

這裏有兩個問題。首先，在頂部列表中，您將template屬性設置爲像template: "#ListItem"和template: "#List"這樣的jQuery選擇器。這些不起作用，因爲最初，您的模板不在您的索引頁面中;他們在單獨的模板文件中。

更改這些屬性用來在你的模塊回調函數模板參數：

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

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

其次，你的define聲明中說，你正在使用把手模板（該hbs!插件），但你的模板實際上是下劃線風格的模板（例如<td><%= TestRunId %></td>）。將模板更改爲使用車把表達式，例如<td>{{ TestRunId }}</td>。