Question

关于Meteor中模板的事件处理程序上下文的快速问题（使用Handlebars）。

在关于模板实例的文档部分（http://docs.meteor.com/#template_inst）中，提到“模板实例对象在创建，呈现和销毁的模板回调中被找到，并且作为事件处理程序的参数 “
在“模板”部分（http://docs.meteor.com/#templates）中，它显示“最后，您可以在模板函数上使用事件声明来设置事件处理程序表。格式在事件映射中记录。< strong>事件处理程序的此参数将是触发事件的元素的数据上下文。“

嗯，这只是部分正确。让我们使用文档中的示例：

<template name="scores">
  {{#each player}}
    {{> playerScore}}
  {{/each}}
</template>

<template name="playerScore">
  <div>{{name}}: {{score}}
    <span class="givePoints">Give points</span>
  </div>
</template
Template.playerScore.events({
  'click .givePoints': function () {
    Users.update({_id: this._id}, {$inc: {score: 2}});
  });

这里'click .givePoints'事件处理程序的“this”上下文确实是playerScore的模板实例。我们来修改html：

<template name="scores">
  <span class="click-me">Y U NO click me?<span>
  {{#each player}}
    {{> playerScore}}
  {{/each}}
</template>

<template name="playerScore">
  <div>{{name}}: {{score}}
    <span class="givePoints">Give points</span>
  </div>
</template>

...并在分数模板上添加.click-me的事件处理程序：

Template.scores.events({
  'click .click-me': function () {
    console.log(this);
  }
});

现在，如果单击跨度，您会记录什么？ Window对象！我期望得到什么？模板对象！或者也许是数据上下文，但它们都不是。但是，在回调内部（例如Template.scores.rendered = function（）{...}），“this”的上下文始终是模板实例。

我想我的真正问题是：这与

有关

Handlebars，Meteor或介于两者之间的错误？
模板上的文档略显不完整？
我完全误解了文档或者没有理解基本的东西关于流星或把手？

谢谢！

Answer 1

此视频解释了概念：

http://www.eventedmind.com/posts/meteor-spark-data-annotation-and-data-contexts

直接回答你的问题：

事件处理程序中的thisArg应该指向数据上下文。但有时数据上下文为undefined。在JavaScript中使用Function.prototype.call(thisArg, ...)时，如果未定义thisArg（例如，未定义dataContext），浏览器会将this设置为等于window。因此，文档本身并非错误，但事件处理代码无法防止数据上下文未定义的可能性。我猜这将在短时间内修复。

那么，是什么产生了模板的数据上下文？通常，您的根模板甚至不具有数据上下文。换句话说，在没有对象的情况下调用Template函数。但是如果使用{{#with块帮助器或{{#each迭代器，将为列表中的每个项创建数据上下文，或者对于 with 帮助器，物体。

示例：

var context = {};

<template name="withHelper">
  {{#with context}}
    // data context is the context object
  {{/with}}
</template>

var list = [ {name: "one"}, {name: "two"} ];

<template name="list">
  {{#each list}}
    {{ > listItem }} // data context set to the list item object
  {{/each}}
</template>

Answer 2

该函数中的第一个参数是事件。因此，您可以使用事件的目标来获取元素。

Template.scores.events({
  'click .click-me': function (event, template) {
    console.log(event.target);
    $(event.target).text("O but I did!");
  }
});

Meteor模板事件处理程序中“this”的上下文（使用Handlebars进行模板化）

2 个答案: