學習把手：如果我不使用`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}}時進行迭代。