这在Meteor的事件处理功能中：这如何绑定到模型对象？

Question

以下代码取自tutsplus中的教程 。

if (Meteor.isClient) {
    var Products = new Array(
        {   Name: "Screw Driver",
            Price: "1.50",
            InStock: true},
        {   Name: "Hammer",
            Price: "2.50",
            InStock: false}
    );
    Template.Products.ProductArr = function () {
        return Products;
    };
    Template.Products.events = {
        "click .Product": function () {
            if (this.InStock)
                confirm("Would you like to buy a " + this.Name + " for " + this.Price + "$");
            else
                alert("That item is not in stock");
        }
    };
}

这是模板：

<template name="Products">
  {{#each ProductArr}}
  <div class="Product">
    <h2>{{Name}}</h2>
    <p>Price: ${{Price}}</p>
    {{#if this.InStock}}
      <p>This is in stock</p>
    {{else}}
      <p>This is sold out</p>
    {{/if}}
  </div>
  {{/each}}
</template>

我不知道this如何绑定到模型对象产品？ 在我看来，这就像魔术。

表达式"click .Product"指定具有类Product HTML元素上的click事件应触发指定的函数。 我明白。 但是我不明白为什么this它绑定到Products数组的元素。

Answer 1

这就是（流星所构建的）车把的工作方式。 您在模板中看到的不是纯JS，而是特定于Handlebars的语法。

在每个块帮助器中，上下文用于设置要迭代的数组的每个元素。 因此，如果使用InStock ，它将在当前迭代的元素上寻找它。

此关键字用于消除歧义。 如果您有一个名为InStock的通用帮助程序，则这样会很方便，例如：

Template.Products.InStock = function (){
   //...
};

但是你要确保你指的是从数组元素的属性，所以你可以用它来显式访问它的上下文。