昨天我决定学习把手,观看了一些教程等等。但是我在代码中遇到了一些奇怪的行为。

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,控制台中没有错误,其他所有功能似乎都正常。
知道有什么问题吗?谢谢!

附注:昨天我甚至遇到了最奇怪的事情,而使用options.fn
我有一个元素h4并使用了块expr。生成{{place}},并且有我的本地主机的地址,例如:<h4>127.0.0.1:8080</h4>

最佳答案

您的toStrong助手几乎是正确的。困扰您的是使用arrow function


  箭头函数不会创建自己的此上下文,因此它从封闭上下文具有其原始含义。


在块帮助器中使用箭头功能时,请执行以下操作:option.fn(this)不是您期望的,this不是当前的车把上下文,在您的情况下是document
因此,您正在做的就是将文档作为新的上下文传递。这就是块帮助器中的{{price}}不显示任何内容的原因。但是,如果您执行{{../price}},它将打印正确的值。

注册车把助手时,应避免使用箭头功能。除非您知道后果。

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


});

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


您也可以更改toUpper助手的使用方式,因为它不是阻止助手。

{{{toUpper name}}} <!-- see below -->


要么

{{toUpper name}} <!-- html will be escaped in your case -->


代替

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


三重藏


  车把{{expression}}返回的HTML值转义。如果你
  不想让把手逃脱一个值,请使用“三重隐藏”,{{{




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

$(document).ready(function(){

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

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

   Handlebars.registerHelper("toStrong", function(options){

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


    console.log(template(data));

});

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

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

关于javascript - Handlebars 块表达不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43932566/

10-12 12:36
查看更多