javascript - Handlebars 模板未呈现 - 可以在 Firefox Inspector 中查看 HTML

Question

我在外部文件 (user-listing-template.html) 中有一个 handlebars 模板，我通过 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

当您检索您的模板文件时，您会将其封装为 <script>标签。 Handlebars 只需要内容。因此(正如您在 Firefox 检查器中看到的那样)编译后的输出是不可显示的 HTML，因为它仍在原始 script 中。标签。

当您将数据分配给 source 时，您需要从数据中提取 HTML变量。

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