Question

以下代码取自tutsplus中的tutorial。

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"指定具有类click的HTML元素上的Product事件应触发指定的函数。我明白了。但我不明白为什么this绑定到Products数组的元素。

Answer 1

这就是Handlebars（Meteor构建的）的工作原理。您在模板中看到的不是纯JS，而是Handlebars特有的语法。

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

此关键字用于消除歧义。如果您有一个名为 InStock 的普通助手，这样就派上用场了，例如：

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

但是你想确保你引用数组中元素的属性，所以你可以使用 this 来显式访问它的上下文。

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

1 个答案: