Meteor.js: template.<html>.events vs Template.<template>.events 'this' 绑定似乎不一致

Question

我正在浏览 Meteor 简单教程，'this' 绑定在不同模板对象中的工作方式在我未知的状态下对我来说似乎不一致。

Template.body.events({
    "submit .new-task": function(event) {
        console.log(this); // Logs an empty object
    }
})


Template.task.events({
     "click .toggle-checked": function() {
         console.log(this); // logs a task
     }   
});

我可以看到任务是视图中定义的xml模板，它是Template.body.helpers对象中函数返回项的可视化表示。

我猜想任务对象绑定了每个对象的 html 表示（尽管我看不出是怎么回事，因为在 li个元素??)

总之。当我点击任务时，this 就是任务。但是当我提交表格时，我希望 this 成为正文。为什么不是？

我期待 Meteor 以类似的方式处理 Template.body 和 Template.task

Answer 1

在 Meteor 中 this 指的是数据上下文。您使用助手或路由控制器（IronRouter 或 FlowRouter）定义它

示例：

{{#with myData}}
    <h1>{{title}}</h1>
{{/with}}

js

Template.yourTemplate.helpers({
    myData : function(){
        return {
            title : "My title" 
        }
    }
})

您需要使用 "event" 参数

Template.task.events({
     "click .toggle-checked": function( event , instance ) {
         console.log( event );
     }   
});

实例参数也很有用。您可以访问 jQuery 选择器，例如：instance.$()，它只会搜索您的模板和子模板中的元素。

我个人经常使用实例。我最喜欢的图案是：

Template.task.onCreated(function(){
    this.vars = new ReactiveDict();
    this.data = "some data";
});

稍后如果您想访问 vars 或 data:

事件 - 你在参数中得到这个
帮手 - var instance = Template.instance();

使用 instance，您可以避免将状态存储在全局命名空间中，例如 Session，并且您的代码更易于维护和理解。我希望这可以帮助您了解模板在 Blaze 中的工作原理。

Meteor.js: template.<html>.events vs Template.<template>.events 'this' 绑定似乎不一致

Meteor.js: template.<html>.events vs Template.<template>.events 'this' binding seems inconsistent

binding

meteor

meteor-blaze