Question

在我的节点服务器提供的.hbs中：

<script src="/javascripts/handlebars.min-latest.js"></script>

<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <h3>{{title}}</h3>
    <div class="body">
      {{body}}
    </div>
  </div>
</script>

在我的客户端javascript文件中：

var source   = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {title: "My New Post", body: "This is my first post!"};
var html    = template(context);
console.log(html);

我的输出：

<div class="entry">
    <h3></h3>
    <div class="body">

    </div>
</div>

基本上，即使在首页上使用最简单的示例，它也无法正常工作。是因为我在前端和后端都使用了把手吗？如果是这样，我该怎么办？

Answer 1

如果您在后端和前端使用Handlebars，则可以轻松修复。只需通过在 \ {{myVar}} 中添加 \ 来替换前端解析器的变量，并保留变量即可由服务器解析为 {{myServerVar}} 。

<script type="text/x-handlebars-template" id="my-row-template"> 
    <tr>
        <td></td>
        <td>\{{fieldName}}</td>
    </tr>
</script>

Answer 2

将$('body').append(html);添加到您的脚本中：

var source   = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {title: "My New Post", body: "This is my first post!"};
var html    = template(context);

$('body').append(html);

Fiddle Demo

Answer 3

在服务器上使用把手时的客户端模板

如果在客户端和服务器上使用把手，则会遇到此问题，服务器上的视图引擎将解析客户端模板。例如，您可能有一个像这样的文件：

 <h1>My Page Title</h1>
 <!-- This template should be transformed into HTML by the server -->
 <div id="photoList" class="pure-g">
    {{#each photos}}
        <div class="photo pure-u-1-12" data-photo-id="{{id}}">
            <img class="pure-u-1" src="{{src}}">
        </div>
    {{/each}}
 </div>

<!-- This template should not be touched. It's for the client -->
 <script type="text/x-handlebars" id="lightbox-template">
    <img class="lightbox-image" src="{{large}}">
    <div class="lightbox-meta">
        <a class="pure-button lightbox-link" href="{{url}}">View on Flickr</a>
        <button class="pure-button lightbox-link lightbox-hide">Hide</button>
    </div>
 </script>

在浏览器上查看时，其中的标签（{{..}}）将被解析。您会得到像这样的东西，这是没有用的：

<!-- I can't use this template on the client anymore!! -->
<script type="text/x-handlebars" id="lightbox-template">
  <img class="lightbox-image" src="">
<div class="lightbox-meta">
    <a class="pure-button lightbox-link" href="">View on Flickr</a>
    <button class="pure-button lightbox-link lightbox-hide">Hide</button>
 </div>
</script>

幸运的是，此修复非常简单，尽管未在任何地方进行记录。只需在所有开头标签（{{）前面添加一个\。 \将在编译步骤中解析出来，您将在客户端上拥有一个完全可用的模板。

<!-- Add a \ before the handlebars -->
<script type="text/x-handlebars" id="lightbox-template">
  <img class="lightbox-image" src="\{{large}}">
  <div class="lightbox-meta">
     <a class="pure-button lightbox-link" href="\{{url}}">View on Flickr</a>
     <button class="pure-button lightbox-link lightbox-hide">Hide</button>
  </div>
</script>

来源： link

Answer 4

在尝试使用带有Shopify主题的把手时是否正在寻找问题？

您肯定在经历液体解析变量并将空字符串提供给客户端的过程。液体解决方案是将车把模板放在raw和endraw标签内。

{% raw %}
<script id="cartItemTemplate" type="text/x-handlebars-template">
   ...
</script>
{% endraw %}

把手示例不起作用

4 个答案: