把手模板未渲染-可以在Firefox Inspector中看到HTML

Question

我在外部文件（user-listing-template.html）中有一個車把模板，該文件是通過JQuery Ajax調用動態加載以檢索文件，通過Handlebars.compile進行編譯然后顯示在div中的。 請參見下面的示例代碼：

模板文件：

<script id="user-listing-template" type="text/x-handlebars-template">
  <h2 class="ui header">User Maintenance</h2>
  <hr>
  <h4 class="text-align-left">Total Users: </h4>
  <br><br>
</script>

JS函數加載模板：

function userListroute() {
var source;
    var template;

    $.ajax({
        url: "/templates/user-listing-template.html",
        cache: true,
        success: function(data) {
            console.log('Template Data From File: ' + data);
            source = data;
            console.log('Template HTML ' + source);
            template = Handlebars.compile(source);
            console.log('Compiled Template: ' + template);

            $('#app').html(template);

        }               
    });  
}

在index.html中，我有一個div，希望能看到模板：

<div id="app"></div>

但是，當我運行此應用程序時，不會呈現模板。 我可以在Firefox開發工具的“檢查器”中看到模板的HTML代碼：

Firefox檢查器輸出

所有console.log（）語句都顯示有效的HTML代碼，但是不會顯示，我只看到空白頁。 控制台輸出如下所示：

Firefox控制台輸出

我顯然做錯了什么，只是不確定是什么-除了渲染位，其他所有東西似乎都在工作。

任何幫助，不勝感激。 我對Handlebars相當陌生，並且正在嘗試概念驗證應用程序。

Answer 1

根據官方網站http://handlebarsjs.com/的說法。 您只編譯模板而不生成html。

template = Handlebars.compile(source);
var html = template(yourdata);     // yourdata is the object rendered to your template
$('#app').html(html);   // can not be template variable, variable html is final html content

Answer 2

檢索模板文件時，將其保留為<script>標記封裝。 把手僅需要內容。 因此（如您在Firefox檢查器中所看到的），編譯后的輸出仍不可顯示，因為它仍在原始script標簽中。

將數據分配給source變量時，需要從數據中提取HTML。

success: function( data ) {
    source = $( data ).html();
    ...