把手模板未渲染-可以在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();
    ...