Events object initialization - Meteor Todos Tutorial

From the tutorial:

Attaching events to templates

Event listeners are added to templates in much the same way as helpers are: by calling Template.templateName.events(…) with a dictionary.

There is this syntax for the aforementioned dictionary which I found interesting:

Template.body.events({
    'submit .new-task'(event) {
     // rest of the code goes here...
    }
});

I experimented a little on a console and thought to point that out because I don’t think that even the MDN docs explain you can initialize an object like that:

let myObj = {
   'my string prop' (param) { }
}

which will end up creating a function accessible like this if you needed to execute it:

myObj['my string prop'](param)

Is there a place where this is documented?

What is the term to define this behaviour? I’m very curious.

The term for this is ES2015 (or ES6) enhanced object literals method definitions. There’s a lot of information on the Internet if you want to research it further. This is a pretty good introduction, but even in that it’s necessary to infer the use of 'some string'() { } as a valid expression from the ability to define computed property keys.

Thank you kindly @robfallows

The fact that I couldn’t find it documented was making me uneasy.

It helps a lot to know how things are to be named, so I can look for them :slight_smile:

Still, this particular (handy) syntax leveraged in Meteor to add the event callbacks is not that popular where I have been reading about object literal method definitions. Meaning, nobody really shows an example with that syntax being used. Makes a little sense, since you wouldn’t usually need to name a function like that.

1 Like