车把示例不起作用答案

【问题标题】：Handlebars example not working车把示例不起作用
【发布时间】：2017-03-03 04:08:03
【问题描述】：

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

基本上，即使在他们的首页上有最简单的示例，它也不起作用。是因为我在前端和后端使用车把吗？如果是这样，我该如何解决？

【问题讨论】：

标签： javascript handlebars.js client-side-templating

【解决方案1】：

如果您将 Handlebars 用于后端和前端，则很容易解决。只需像 \{{myVar}} 一样在它们的前面添加一个 \ 来转义用于您的前端解析器的变量，然后留下要使用的变量由服务器解析为{{myServerVar}}。

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

【讨论】：

【解决方案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

【讨论】：

它适用于 Jsfiddle，但不适用于我的网站。此外，我的问题不仅仅是在我的屏幕上看不到文字。模板根本没有注册上下文，当我尝试记录它时可以看到。
你是如何加载你的客户端 javascript 文件的？你确定它是在 dom 准备好的还是在页面底部？控制台有错误吗？
我在控制台中没有收到任何错误，只有我在问题的第三个 sn-p 中提供的文本
我意识到了这个问题。服务器端把手干扰客户端把手。所有用于客户端的 {{}} 标记都被服务器端模板取消。目前，我能看到的唯一解决方案是在前端使用不同的模板引擎。
很高兴你知道了。也许还有一些解决方案可以兼得 - stackoverflow.com/questions/10037936/…

【解决方案3】：

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

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

 <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

【讨论】：

【解决方案4】：

在尝试使用带有 shopify 主题的车把时搜索问题？

您肯定正在经历流畅的变量解析和向客户端提供空字符串。液体解决方案是将您的车把模板包含在 raw 和 endraw 标记中。

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

【讨论】：