[英]The context of “this” in Meteor template event handlers (using Handlebars for templating)
关于Meteor中模板事件处理程序(带Handlebars)的上下文的快速问题。
嗯,这只是部分正确。 让我们使用文档中的示例:
<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”的上下文始终是模板实例。
我想我真正的问题是:这是否与此有关
谢谢!
该视频解释了这些概念:
http://www.eventedmind.com/posts/meteor-spark-data-annotation-and-data-contexts 。
直接回答你的问题:
事件处理程序中的thisArg 应指向数据上下文。 但有时数据上下文是undefined
。 当您使用Function.prototype.call(thisArg, ...)
在JavaScript中,如果thisArg是不确定的(例如,一个DataContext是不确定的),浏览器会设置this
等于窗口。 因此,文档本身并没有错 ,但事件处理代码无法防止数据上下文未定义的可能性。 我猜这将在短期内修复。
那么,什么产生模板的数据上下文? 通常,您的根模板甚至不具有数据上下文。 换句话说,在没有对象的情况下调用Template函数。 但是如果使用{{#with
块帮助器或{{#each
迭代器,将为列表中的每个项创建数据上下文,或者对于with helper,则为对象。
例:
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>
函数中的第一个参数是事件。 因此,您可以使用事件的目标来获取元素。
Template.scores.events({
'click .click-me': function (event, template) {
console.log(event.target);
$(event.target).text("O but I did!");
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.