Javascript 车把示例不工作

在我的节点服务器提供的my.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>

我的输出：

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

    </div>
</div>

基本上，即使在他们的frontpage上有最简单的例子，它也不起作用。是因为我前后都用了把手吗？如果是这样的话，我该如何处理呢？

添加

$（'body'）。追加（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);

如果您在后端和前端都使用把手，则有一个简单的修复方法。只需在前端解析器的前面添加一个\来转义这些变量，如so\{myVar}，并将要由服务器解析的变量保留到{{myServerVar}

​
\{{fieldName}}
在服务器上使用把手时的客户端模板

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

 <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>


隐藏

来源：
在尝试使用带有shopify主题的把手时搜索问题

您肯定正在经历液态解析变量并向客户端提供空字符串。液态解决方案是将您的把手模板封装在
raw
&
endraw
标记中

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

{%raw%}
...
{%endraw%}
它在JSFIDLE上工作，但在我的网站上不起作用。此外，我的问题不仅仅是看不到屏幕上的文本。模板根本没有注册上下文，这一点在我尝试登录时就可以看到。你是如何加载客户端javascript文件的？你确定它是在dom就绪状态下还是在页面底部？控制台中是否有任何错误？我不是在控制台中没有任何错误，只有我在问题的第三个片段中提供的文本我意识到了这个问题。服务器端手柄干扰了客户端手柄。所有{{}用于客户端的标记正在被服务器端模板取消。目前，我看到的唯一解决方案是在前端使用不同的模板引擎。很高兴你发现了这一点。也许还有一些解决方案可以同时使用这两种方法-
<!-- 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>

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