Question

我在一个非常简单的Web应用程序中有2个文件

第一个是标准的index.html，它看起来像下面的

<body>
<div id="add-stuff"></div>
<script id="the-template" type="text/x-handlebars-template" src="some-template.erb.html"></script>
<script type="text/javascript">
  var data = [];
  var source = $("#the-template").html();
  var template = Handlebars.compile(source);
  $('#add-stuff').html(template(data));
</script>
</body>

第二个是我的车把模板“some-template.erb.html”，它看起来像下面的

<table>
{{#each item}}
<tr><td>{{ item.name }}</td></tr>
{{/each}
</table>

我上面的内联javascript的问题是，当我尝试“.html（）”部分时，它总是返回一个空字符串（因为我在erb.html文件中链接）。

我找到了一个可以让我实现这一目标的工作，如果我使用$ .ajax来提取模板但是我更喜欢上面这样的东西（所以我可以包含模板客户端w / out任何嵌套jQuery回调）。

这可能吗？如果不能，我该怎样做才能改进基于$ .ajax的方法？

**基于ajax的方法有效，如下所示**

<body>
<div id="add-stuff"></div>
<script type="text/javascript">
$.ajax({
  url: 'some-template.erb.html',
  cache: true,
  success: function (source) {
    var data = [];
    var template = Handlebars.compile(source);
    $('#add-stuff').html(template(data));
  }
});
</script>
</body>

Here是一个指向stackoverflow问题的链接，它更详细地显示了$ .ajax版本

Answer 1

也许它已经过时了，但我今天找到了你的问题，我对你或处理同样问题的人提出了建议。它不是一个完美的，但对于小模板，如果你不想使用ajax则可以选择。

您如何将模板作为字符串写入外部JS文件中的变量并通过脚本标记包含它？

template.js

var source = '<table>\
          {{#each item}}\
          <tr><td>{{ item.name }}</td></tr>\
          {{/each}';

的index.html

<body>
<div id="add-stuff"></div>
<script src="template.js"></script>
<script type="text/javascript">
  var data = [];
  var template = Handlebars.compile(source);
  $('#add-stuff').html(template(data));
</script>
</body>

如何在不使用$ .ajax的情况下编译外部手柄模板

1 个答案: