Rendering path with Meteor Iron Router

Question

I'm implementing cast.js in Meteor and I'm trying to render a larger photo after clicking on a thumbnail using Iron Router, however I'm having trouble rendering the correct path. The thumbnails render just fine, however when the photo is clicked I'm getting an error of No route found for path:.

The template that I'm using to render each thumbnail photo is

  var renderTemplate = function(obj){
   return "<a href='{{pathFor photo}}'><img class='img-rounded' src='" + obj.picture + "'></a>"
  };

  Template.userPhotos.rendered = function(){
    var el = this.find('#cast');
    var mycast = cast(el);
    mycast.draw(renderTemplate);

    this.handle = Meteor.autorun(function(){
      var picture = Photos.find().fetch();
      mycast
        .data(picture , '_id')
        .dynamic(150, 150, 10, 10);
    });
  }

And is placed within the cast id in this template

<template name="userPhotos">
  <div class="container">
    <div class="photos">
      <div id='cast'></div>
    </div>
  </div>
</template>

The problem is coming from the href that is rendered. I'm trying to pass the photo _id and render a larger photo in the below template, which is called "source" in mongoDB.

<template name="photo">
  <div class="well">
    <img class="img-rounded" src="{{source}}">
  </div>
</template>

Currently, my router is set up as follows:

this.route('photo', {
    path: '/photo/:_id', 
    waitOn: function() {
      return [
        Meteor.subscribe('picture', this.params._id),
      ];
    },
    data: function() { return Photos.findOne(this.params._id); }
  });

Once a photo is clicked, it sends me to this path and throws this error Oh no! No route found for path: "/%7B%7BpathFor". %7B is URL speak for { so it looks like handlebars or Iron Router isn't translating the template when it is passed through as a string.

Any thoughts on how to improve this code?

Thanks in advance!

Geoffrey Booth Geoffrey Booth · Accepted Answer · 2014-01-09T23:58:28

Your renderTemplate function is just returning a string, not a rendered template. Rewrite the template you were trying to assemble there as a Handlebars template using helpers:

<template name="photoLink">
  <a href="{{getPathForPhoto}}">
    <img class="img-rounded" src="{{getThumbnailSrc}}">
  </a>
</template>

and (you'll have to adapt the below because I don't know what the this variables in your context have as properties; basically, get the path (or the components of the path, like the _id) and the thumbnail path/src into this function via this or via a passed parameter):

Template.photoLink.getPathForPhoto = function() {
  return "/photo/" + this._id;
}

Template.photoLink.getThumbnailSrc = function() {
  return "/thumbnail/" + this._id;
}

Again you'll need to rework the above functions to get them to work for your app; and you'll need to create a route for the thumbnail paths too.

Is it annoying to create tiny JavaScript functions for every little thing that requires the slightest bit of logic in Handlebars? Yes. But that's just the way it's designed, sorry. You could use other functions to render the template from your assembled string, but this capability is going away in the next version of Meteor.

Rendering path with Meteor Iron Router

1 Answers