0

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

4

1 回答 1

1

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

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

this关键字用于消除歧义。如果您有一个使用名称InStock注册的通用助手，这会派上用场，例如：

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

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

于 2013-07-23T15:15:53.500 回答