Skip to content

Instantly share code, notes, and snippets.

@nachiket-p

nachiket-p/meteor-eventmap.html

Created June 28, 2012 11:37
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nachiket-p/3010818 to your computer and use it in GitHub Desktop.
Save nachiket-p/3010818 to your computer and use it in GitHub Desktop.
Download ZIP
How to create Backbone like event-map for meteor template events
Raw
meteor-eventmap.html
<head>
<title>meteor-eventmap</title>
</head>
<body>
{{> hello}}
{{> hello2}}
</body>
<template name="hello">
{{greeting}}
<div id="box1">
<input type="button" value="Click" />
<span> --- </span>
</div>
<div id="box2">
<input type="button" value="Click" />
<span> --- </span>
</div>
<div id="box3">
<input type="button" value="Click" />
<span> --- </span>
</div>
</template>
<template name="hello2">
{{greeting}}
<div id="box4">
<input type="button" value="Click" />
<span> --- </span>
</div>
<div id="box5">
<input type="button" value="Click" />
<span> --- </span>
</div>
<div id="box6">
<input type="button" value="Click" />
<span> --- </span>
</div>
</template>
Raw
meteor-eventmap.js
//How to create Backbone like event-map for meteor template events
if (Meteor.is_client) {
console.log('underscore', _);
Template.hello.greeting = function () {
return "Welcome to meteor-eventmap demo.";
};
Template.hello.eventMap = {
box1Click: function (e) {
$($(e.target).siblings()[0]).text('Clicked 1');
},
box2Click: function (e) {
$($(e.target).siblings()[0]).text('Clicked 2');
},
box3Click: function (e) {
$($(e.target).siblings()[0]).text('Clicked 3');
}
};
Template.hello.events = {
'click #box1 input' : Template.hello.eventMap['box1Click'],
'click #box2 input' : Template.hello.eventMap['box2Click'],
'click #box3 input' : Template.hello.eventMap['box3Click'],
};
//OR like this
_.extend(Template.hello2, {
greeting: function() {
return "Or this way";
},
eventMap: {
box4Click: function (e) {
$($(e.target).siblings()[0]).text('Clicked 4');
},
box5Click: function (e) {
$($(e.target).siblings()[0]).text('Clicked 5');
},
box6Click: function (e) {
$($(e.target).siblings()[0]).text('Clicked 6');
}
}
});
Template.hello2.events= {
'click #box4 input' : Template.hello2.eventMap['box4Click'],
'click #box5 input' : Template.hello2.eventMap['box5Click'],
'click #box6 input' : Template.hello2.eventMap['box6Click']
};
}
if (Meteor.is_server) {
Meteor.startup(function () {
// code to run on server at startup
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment