Created
June 28, 2012 11:37
-
-
Save nachiket-p/3010818 to your computer and use it in GitHub Desktop.
How to create Backbone like event-map for meteor template events
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //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