meteorjs iron-router and empty link tags

Question

I am using iron-router in my meteorjs project. I am using an after: handler to set a session variable which shows or hides a leaflet map. I can't put the map in my templates like normal because meteorjs obliterates the map div and it's state.

Now I am adding bootstrap menus and dropdowns, which are built as anchor tags with href="#" like this:

<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li class="disabled"><a href="#">Disabled</a></li>
</ul>

Clicking on these menus doesn't leave the url, but it causes iron-router to call my after: handler with each click or submenu drilldown.

Is there a way to prevent this? It's not detrimental to my project but it seems unclean.

Answer 1

By default iron-router attaches to links with the selector a[href]. I found this didn't work so well (especially with bootstrap plug-ins) and developed a fix https://github.com/EventedMind/iron-router/pull/324

You can modify the link selector like so:

if (Meteor.isClient){
  IronLocation.configure({
    linkSelector: "a[href][data-iron]"
  });
}

With this setting, iron-router will only pick up on links that have the data-iron attribute.

The alternative is to try and bind to a[href="#"] and call event.stopPropagation() before it hits the iron-router link handler.