Search code examples
javascriptmeteoriron-router

MeteorJS iron-router "sub-templates" or re-render prevention or optional parameter

I'm trying to migrate a two year old meteor project with many deprecated packages to the current version. But I'm stuck with iron-router and this:

  1. A route /map showing an interactive map with markers
  2. When a user click on a marker an absolute positioned div with full-width-height opens and show a detail page
  3. The url should change to /map/<markerId> so the user can share url and use back button
  4. The div holding the map should not be destroyed or rerendered because the user should not loose his "map-state" like zooming & scrolling when going back

I tried several approaches but didn't find a solution that solve point 3 and 4 simultaneously. With the old router package it just worked with the two routes setting a different Session variable and rendering the same template.

Thanks in advance for ideas

Solution

  • You could try using the to parameter for Iron Router's render function:

    this.render('markerdetails', { to: 'yieldname' });

    To use that you need to specify a yield in your template containing the map:

    {{> yield "yieldname"}}

    Further reading on the to parameter: https://github.com/iron-meteor/iron-router/blob/devel/Guide.md#rendering-templates-into-regions-with-javascript

    Not 100% sure what happens if a user just opens the URL. You could probably check if the map is already visibile and if not render the map first and then the marker into the yield.