Javascript 学习车把：为什么不是'；如果我没有'；不要用这个`

在看了几个教程之后，我正在学习把手并使用下面的代码。下面，如果我不使用关键字

this

，我的代码将无法工作；我尝试了

{{{#each shoesData}}

，但我的HTML没有任何变化。如果我不想使用

这个

，只有当我将shoesData更改为JS Example#2（遵循另一个教程中使用对象名称和而不是

这个

关键字的示例）并且在我的模板中编写了

{{每双鞋}

，它才会起作用。有什么区别

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

---

传递给模板的项是变量“shoesData”引用的数组。因此，当模板看到它时，“this”对象如下所示：

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

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

在Javascript#2中，传递给模板的对象是shoesData引用的值，在本例中为：

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

你看到区别了吗？在第二个示例中，模板看到一个属性为

shoes

的对象。在您的示例（Javascript#1）中，它只看到一个数组

在这两种情况下，

this

参数都表示传递给模板的内容，因此在javascript中，它与

this

一起工作，因为它表示可以由

{{{each}}

迭代的数组

要修复此问题以按预期方式工作，请将shoesData更改为如下所示：

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

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

时将迭代此操作