Skip to content

Instantly share code, notes, and snippets.

@robertdavid010

robertdavid010/bodyEvents.js

Last active March 7, 2017 14:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save robertdavid010/dc77aa4430ace94258147316f798bf3a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save robertdavid010/dc77aa4430ace94258147316f798bf3a to your computer and use it in GitHub Desktop.
Download ZIP
Description of DOM event binding in Meteor Blaze
Raw
bodyEvents.js
/*
Here we put the code so it is accessible app wide (assuming it's bound to <body>.
This also assumes both the FlowRouter package and the gwendall:body-events fix package.
*/
if (Meteor.isClient) {
Template.body.events({
"click [data-nav]": function (event, templ) {
event.preventDefault();
FlowRouter.go(event.currentTarget.dataset.nav);
},
"click [data-href]": function (event, templ) {
event.preventDefault();
var url = event.currentTarget.dataset.href;
window.open(url, '_blank');
window.focus();
}
});
}
Raw
homeNav.html
<template name="homeNav">
<ul class="list-class">
<li data-nav="{{pathFor 'home'}}">Go Home</li> <!-- using router helper -->
<li data-nav="/userProfile/userId">User Profile</li> <!-- using manual app route -->
<li data-href="http://awebsite.com">Blog</li> <!-- 'href' is used to link to exeternal url -->
</ul>
<button data-event="createMessage">Send A Message</button>
</template>
Raw
homeNav.js
if (Meteor.isClient) {
Template.homeNav.events({
"click [data-event='createMessage']": function (event, templ) {
// Handle the event here as needed
}
});
}
Raw
styles.css
/* Make the mouse pointer behaves like as if a normal clickable element */
[data-nav], [data-href], [data-event] {
cursor: pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment