加载和编译外部Handlebars模板?

时间:2013-05-06 20:41:29

标签: javascript handlebars.js

我正在尝试使用Handlebars为显示本地HTML文件的自助服务终端设备供电。这些文件使用Javascript来获取远程内容,Handlebars控制模板/输出。

我想要做的是将Handlebars模板放在他们自己的目录中,当与按钮(链接)交互时 - 将这些模板注入页面,然后用AJAX响应填充内容。

除模板输出外,我的一切都在工作:

链接示例:

<a href="#" onclick="Kiosk.history(); return false;">History</a></li>

在application.js中:

history: function() {

    var source;

    Zepto.ajax({
      url: 'templates/history.handlebars',
      dataType: 'html',
      cache: false,
      success: function(data, status, response) {
        source = data;
        var template    = Handlebars.compile(response.responseText);

        var context = {
          title: 'Static Title (to be replaced)'
        };

        $('#main-content').html(template(context));
      }
    });

把手档案:

<div class="row" id="history">
  <div class="large-10 columns large-offset-1">
    <script id="hb-history" type="text/x-handlebars-template">
      <h2>{{ title }}</h2>

      {{ body }}
    </script>should have a template here
  </div>
</div>

我似乎遗漏了一些东西,因为#main-content div从未使用动态模板进行更新,只有输出&#39;应该是这里的模板&#39;。

1 个答案:

答案 0 :(得分:2)

哦,就在我面前。不需要模板中的脚本标记。