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

所有console.log（）语句都显示有效的HTML代码，但是不会显示，我只看到空白页。控制台输出如下所示：

Firefox Console Output

我显然做错了，只是不确定是什么-除渲染位外，其他所有功能似乎都在起作用。

非常感谢您的协助。我对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();
    ...

把手模板未呈现-可以在Firefox Inspector中看到HTML

2 个答案: