2

我在一个非常简单的 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 来拉入模板，我可以实现这一点，但我更喜欢上面的东西（所以我可以包含模板客户端而不包含任何嵌套的 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>

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

4

1 回答 1

1

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

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

模板.js

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

索引.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>
于 2015-08-31T12:07:05.433 回答