3

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

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

4

4 回答 4

4

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

<script type="text/x-handlebars-template" id="my-row-template"> ​
    <tr>
        <td></td>
        <td>\{{fieldName}}</td>
    </tr>
</script>
于 2017-02-09T09:22:12.897 回答
0

添加$('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);

小提琴演示

于 2016-10-21T01:30:27.073 回答
0

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

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

{% raw %}
<script id="cartItemTemplate" type="text/x-handlebars-template">
   ...
</script>
{% endraw %}
于 2019-05-25T16:27:41.537 回答
0

在服务器上使用 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>

来源： 链接

于 2019-05-13T02:12:45.250 回答