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

Question

I'm learning Handlebars and using this piece of code below after looking at a couple of tutorials. Below, my code won't work if I don't use the keyword this ; I tried {{#each shoesData}} and nothing happens to my HTML. If I don't want to use this , it will work only if I change the shoesData to JS Example #2 (following an example from another tutorial that uses the name of an object and not this keyword) and also, in my template wrote {{#each shoes}} . What's the difference?

  <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

The item you are passing to your template is the array that is referenced by the variable 'shoesData'. So when the template sees it the 'this' object looks like this:

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

In Javascript #2, the object passed to the template is the value referenced by shoesData, which in this case is:

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

Do you see the difference? In the second example, the template sees an object with a property of shoes . In your example (Javascript #1) it simply sees an array.

The this parameter in both cases represents what is passed to the template so in your javascript it works with this because it represents an array that can be iterated over by the {{#each ... }} .

To fix this issue to work the way you expect, change the shoesData to look like this:

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

Now you can use {{#each shoes}} in your template.

Another way to think of this, if you are still stuck, is what do you see if you do console.log(shoesData) in both examples? This will tell you what the handlebars will see as the this object, and if you do console.log(shoesData.shoes) in the second example, this is what will be iterated over when you do {{#each shoes}} .