Question

昨天我决定学习Handlebars，观看了几个教程等等。但是我的代码遇到了一些奇怪的行为。

1）我有我的json数据：

{
  "products": [
    {
      "name": "foo",
      "price": 488.98,
      "available": 3
    },
    {
      "name": "bar",
      "price": 520.89,
      "available": false
    }
  ]
}

2）我的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Handlebars</title>
  </head>
  <body>

    <div id="divToPopulate">
      <!-- population w/ data -->
    </div>

    <script id="hdtemp" type="text/x-handlebars-template">
      {{#each products}}

        {{#toUpper name}}
        {{/toUpper}}

        {{#toStrong}}
          <h4>{{price}}</h4>
        {{/toStrong}}

        {{#if available}}
          <p>{{available}}</p>
          {{else}}<p>Out of stock</p>
        {{/if}}

      {{/each}}
    </script>

    <!-- scripts -->
    <script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.8/handlebars.js"></script>
    <script src="script.js"></script>
  </body>
</html>

3）我的剧本：

$(document).ready(function(){

  const inittemp = $('#hdtemp').html();
  const template = Handlebars.compile(inittemp);

  Handlebars.registerHelper("toUpper",(property)=>{
    return new Handlebars.SafeString(`<h2>${property.toUpperCase()}</h2>`);
  });

  Handlebars.registerHelper("toStrong", (options)=>{
    return new Handlebars.SafeString(`<p><strong>${options.fn(this)}</strong></p>`);
  });

  $.ajax("products.json").done((data)=>{
    $('#divToPopulate').html(template(data));
    console.log(data);
  });
});

由于某种原因，当我渲染页面时，我的“toStrong”辅助块表达式不起作用。

{{#toStrong}}
              <h4>{{price}}</h4>
            {{/toStrong}}

之前的那个（“toUpper”）工作正常，但是一旦我使用options.fn（this）而不是{{price}}，我就会得到黑色元素。 W / ctrl + shift + i，我在控制台中没有错误，其他一切似乎都运行得很好。知道什么似乎是错的吗？谢谢！

P.S：昨天我甚至用options.fn遇到了最奇怪的事情我有一个元素h4并使用了块expr。生成{{place}}并且我的localhost的地址如：<h4>127.0.0.1:8080</h4>

把手块表达不起作用

0 个答案: