dynamically adding route with iron router in javascript

Question

I want to make a route with iron router, but for some reason it's not rendering anything at all.

<a target='_blank' href='/strategy?_id=" + strategyId + "'>Details</a>

...and my Router.map function has this:

this.route('strategy', {
    path: 'strategy',
    data: function(){
        return Strategies.findOne(this.params._id);
    },
    action:function(){
        this.render();
    }
});

The link apparently links correctly to

http://localhost:3000/strategy?_id=jShHwfv4fM7oxnrg2

..but for some reason it's not rendering anything at all (resulted template is empty).

Also, I tried making this:

<a target='_blank' href='" + Router.route('strategy', {_id: strategyId}) + "'>Details</a>

...but that actually executes the route immediately. What I want is to just render the link. What am I missing here?

---

edit following 1st answer: i know about pathFor but (maybe i wasnt clear in my explanation) - the anchor code you see above is in a JS function (file.js), im not talking about a html file where i can easily use pathFor. This anchor is generated dynamically in a JS function. I cant use handlebars code in a js function afaik

Answer 1

To render your routes URL in templates you should use pathFor :

<template name="strategy">
  {{#with strategy}}
    <a  href={{pathFor 'strategy'}} target="_blank">Details</a>
  {{/with}}
</template>

pathFor takes a route name as parameter and renders the URL using the current data context, which you should set to the document the URL is depending on.

Your route definition is broken, it should look like this :

this.route("strategy",{
  // specify the strategy _id as an URL component instead of query parameter
  path:"/strategy/:_id",
  data: function(){
    // this.params._id lookups for URL components, not query params
    var strategy=Strategies.findOne(this.params._id);
    return {
      strategy:strategy
    };
  }
});

It's important to have correctly formed path for your routes : they always begin with / and can contain named parameters using this syntax : :parameterName, these params are retrievable in the route functions using this.params.parameterName.

EDIT :

To get a correct path in JS, use Router.path, which is what pathFor is using anyway :

Template.strategy.helpers({
  anchor:function(strategy){
    var href = Router.path("strategy",strategy);
    return "<a href='"+href+"'>Link</a>";
  }
});

You need to render your anchor using triple brackets notation.

<template name="strategy">
  {{{anchor strategy}}}
</template>