学习把手：如果我不使用`this`，为什么数据不传递到我的模板上

Question

在看了几本教程之后，我正在学习Handlebars，并在下面使用这段代码。 在下面，如果不使用关键字this ，我的代码将无法工作； 我尝试了{{#each shoesData}} ，但HTML没有任何反应。 如果我不想使用this ，则仅当我将shoeData更改为JS Example＃2（下面是另一个使用对象名称而不是 this关键字的教程中的示例）并且在我的模板中编写时，它才有效{{#each shoes}} 。 有什么不同？

  <h3>The List of Shoes:</h3>
  <ul class="shoesNav"></ul>​

  <script id="shoe-template" type="text/x-handlebars-template">
    {{#each this}}
      <li class="shoes"><a href="/{{name}}">{{name}} -- Price: {{price}}</a></li>
    {{/each}}
  </script>

JavaScript＃1

  var shoesNav = document.getElementsByClassName("shoesNav");
  var theTemplateScript = document.getElementById("shoe-template").innerHTML;
  var theTemplate = Handlebars.compile(theTemplateScript);

  var shoesData =[
      {
        name: "Nike",
        price: 199.00
      },
      {
        name: "Loafers",
        price: 59.00
      },
      {
        name: "Wing Tip",
        price: 259.00
      }
    ];

  var theCompiledTemplate = theTemplate(shoesData);
  shoesNav[0].innerHTML = theCompiledTemplate;

JavaScript＃2

  var shoesData =
  {
    shoes: [
      {
        name: "Nike",
        price: 199.00
      },
      {
        name: "Loafers",
        price: 59.00
      },
      {
        name: "Wing Tip",
        price: 259.00
      }
    ]
  };

Answer 1

您传递给模板的项目是变量“ shoesData”引用的数组。 因此，当模板看到它时，“ this”对象看起来像这样：

    [
      {
        name: "Nike",
        price: 199.00
      },
      {
        name: "Loafers",
        price: 59.00
      },
      {
        name: "Wing Tip",
        price: 259.00
      }
    ]

在Javascript＃2中，传递给模板的对象是shoeData引用的值，在这种情况下为：

  {
    shoes: [
      {
        name: "Nike",
        price: 199.00
      },
      {
        name: "Loafers",
        price: 59.00
      },
      {
        name: "Wing Tip",
        price: 259.00
      }
    ]
  };

你看得到差别吗？ 在第二个示例中，模板看到一个具有shoes属性的对象。 在您的示例（JavaScript＃1）中，它只是看到一个数组。

this两种情况下的this参数都表示传递给模板的内容，因此在您的javascript中可以使用this因为它表示可以由{{#each ... }}进行迭代的数组。

要解决此问题，以使其达到预期的效果，请将shoeData更改为如下所示：

shoesData = {  
  shoes:
    [
      {
        name: "Nike",
        price: 199.00
      },
      {
        name: "Loafers",
        price: 59.00
      },
      {
        name: "Wing Tip",
        price: 259.00
      }
    ]
  }

现在，您可以在模板中使用{{#each shoes}} 。

如果仍然遇到问题，可以用另一种方法思考这两个示例中的console.log(shoesData)问题。 这将告诉您将在this对象上看到的把手，如果在第二个示例中执行console.log(shoesData.shoes) ，则将在执行{{#each shoes}}时进行迭代。