有关流星中模板的事件处理程序(使用Handlebars)的上下文的快速问题。
- 在模板实例的文档部分( docs.meteor/#template_inst )提到模板实例对象在创建,渲染和销毁的模板回调中被找到,而一个事件处理程序的参数
- 在模板部分( http ://docs.meteor/#templates )它说最后,你可以在模板函数上使用事件声明来设置一个事件处理程序的表格。 。该事件处理程序的这个参数将是触发该事件的元素的数据上下文。
- Handlebars,Meteor或其他地方的错误?
- 模板上的文档稍微不完整
- 我完全误解了文档,或者没有理解基本的关于Meteor或Handlebars的内容? li>
- In the section of Documentation on template instances (docs.meteor/#template_inst) it is mentioned that "Template instance objects are found as the value of this in the created, rendered, and destroyed template callbacks and as an argument to event handlers"
- In the Templates section (docs.meteor/#templates) it says "Finally, you can use an events declaration on a template function to set up a table of event handlers. The format is documented at Event Maps. The this argument to the event handler will be the data context of the element that triggered the event."
- a bug in Handlebars, Meteor or somewhere in between?
- slightly incomplete documentation on the templates?
- me completely misinterpreting the docs or not understanding something fundamental about Meteor or Handlebars?
好吧,这只是部分正确的。我们使用文档中的示例:
< template name =scores> {{#each player}} {{> playerScore}} {{/ each}} < / template> < template name =playerScore> < div> {{name}}:{{score}} < span class =givePoints>给点< / span> < / div> 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>是否否点击我?< span> {{#each player}} {{> playerScore}} {{/ each}} < / template> < template name =playerScore> < div> {{name}}:{{score}} < span class =givePoints>给点< / span> < / div> < / template>...并为分数模板上的.click-me添加事件处理程序:
Template.scores.events({'click .click-me':function(){ console。 log(this); } });现在,如果您单击跨度,您会记录什么? Window对象!我期望得到什么?模板对象!或者可能是数据上下文,但它不是。但是,在回调中(例如Template.scores.rendered = function(){...}),this的上下文始终是模板实例。
我想我的真正问题是:这是与什么有关
感谢! 解释了这些概念:
www.eventedmind/posts/meteor-spark-data-annotation-and-data-contexts 。
直接回答您的问题:
事件处理程序内的thisArg应指向数据上下文。但有时数据上下文是 undefined 。当您在JavaScript中使用 Function.prototype.call(thisArg,...)时,如果thisArg未定义(例如dataContext未定义),浏览器将设置这个等于窗口。因此,文档本身并不是错误的,但事件处理代码并未防范数据上下文未定义的可能性。我猜这将在短期内得到修复。
那么,为模板产生数据上下文的是什么呢?通常你的根模板甚至没有数据上下文。换句话说,模板函数在没有对象的情况下被调用。但是,如果您使用 {{#with block助手或 {{#each 迭代器,数据上下文将会为列表中的每个项目创建,或者在使用助手的情况下创建对象。
示例:
var context = {}; < template name =withHelper> {{#with context}} //数据上下文是上下文对象 {{/ with}} < / template> var list = [{name:one},{name:two}]; < template name =list> {{#each list}} {{> listItem}} //将数据上下文设置为列表项对象 {{/ each}}
A quick question on the context of the event handlers for templates in Meteor (with Handlebars).
Well, this is only partially true. Let's use an example from the docs:
<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}}); });Here the "this" context of the 'click .givePoints' event handler is indeed the template instance of playerScore. Let's modify the 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>... and add an event handler for .click-me on the scores template:
Template.scores.events({ 'click .click-me': function () { console.log(this); } });Now, if you click the span, what do you get logged? The Window object! What did I expect to get? The template object! Or maybe the data context, but it's neither. However, inside the callbacks (e.g. Template.scores.rendered = function(){ ... }) the context of "this" is always the template instance.
I guess my real question would be: is this something to do with
Thanks!
解决方案This video explains the concepts:
www.eventedmind/posts/meteor-spark-data-annotation-and-data-contexts.
The direct answer to your question:
The thisArg inside an event handler should point to a data context. But sometimes the data context is undefined. When you use the Function.prototype.call(thisArg, ...) in JavaScript, if the thisArg is undefined (e.g. a dataContext is undefined) the browser will set this equal to window. So, the docs aren't wrong per se but the event handling code isn't guarding against the possibility of a data context being undefined. I'm guessing that will be fixed in short order.
So, what produces a data context for a template? Normally your root template won't even have a data context. In other words, the Template function is called without an object. But if you use the {{#with block helper or the {{#each iterator, a data context will be created for each item in the list, or in the case of the with helper, the object.
Example:
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>
更多推荐
“这个”的上下文在Meteor模板事件处理程序中(使用Handlebars进行模板化)
发布评论