Rebolon
Rebolon

Reputation: 1307

meteor iron-router and dynamic template rendering

today i decided to migrate my main app from package router to iron-router. My app was able to do dynamic template rendering : some template are rendered programatically because it depends of some info from Mongo That was quite easy with router package but with iron-router i fall into problems.

When i do a

Template.myTplName(data)

it always return a

TypeError: Object #<Object> has no method 'fn'

To get more logs i did this in the console :

try{
   Template.myTplName(data);
} catch(e) {
   console.trace();
}

And i get this :

You called Router.path for a route named undefined but that that route doesn't seem to exist. Are you sure you created it? 
console.trace() utils.js:169
Utils.warn utils.js:169
IronRouter.path router.js:178
(anonymous function) helpers.js:49
apply evaluate-handlebars.js:241
invoke evaluate-handlebars.js:266
(anonymous function) evaluate-handlebars.js:330
Spark.labelBranch spark.js:1124
branch evaluate-handlebars.js:320
(anonymous function) evaluate-handlebars.js:329
_.each._.forEach underscore.js:79
template evaluate-handlebars.js:323
Handlebars.evaluate evaluate-handlebars.js:377
(anonymous function) evaluate-handlebars.js:11
(anonymous function) deftemplate.js:157
Spark.isolate spark.js:859
(anonymous function) deftemplate.js:154
Spark.createLandmark spark.js:1163
(anonymous function) deftemplate.js:135
Spark.labelBranch spark.js:1124
partial deftemplate.js:134
(anonymous function) VM28316:2
InjectedScript._evaluateOn VM28186:603
InjectedScript._evaluateAndWrap VM28186:562
InjectedScript.evaluate VM28186:481
console.trace() VM28316:2
(anonymous function) VM28316:2
InjectedScript._evaluateOn VM28186:603
InjectedScript._evaluateAndWrap VM28186:562
InjectedScript.evaluate

So in fact when i run that command, iron-router seems to try to handle it. But this template is not named in its stack so it might be a problem. But i donit want the router to manage that part. Maybe i should change the conception of that part of the app but i would prefer not to have to.

Here is the code of the parent template:

<template name="resultsList">
   {{#if selectedSearch}}
     {{#if itemCount}}
     <div class="row">
       {{#each items}}
       <div id="item_{{_id}}">{{> myitem}}</div>
       {{/each}}
     </div>

     {{> loadMore}}
     {{/if}}
</template>

Now the code of the template :

<template name="myitem">
   {{#if currentUser}}
   <div class="btn-toolbar">
     <div class="btn-group" style="margin-left: 20px;">
       {{#if hasDetail}}
       <button class="btn btn-sm btn-success"><span class="glyphicon glyphicon-zoom-in"></span></
 button>
       {{else}}
       <!-- fake button that just take the place of the detail button -->
       <button class="btn btn-sm btn-link" style="cursor:default;text-decoration:none;margin-left:12px;"></button>
       {{/if}}
       <button {{#if starSelected}}disabled="disabled"{{/if}} class="btn btn-sm btn-info StarItem" title="A
 appeler"><span class="glyphicon glyphicon-phone"></span></button>
       <button {{#if visitedSelected}}disabled="disabled"{{/if}} class="btn btn-sm btn-info VisitItem" title="A
 visiter"><span class="glyphicon glyphicon-road"></span></button>
       <button {{#if removedSelected}}disabled="disabled"{{/if}} class="btn btn-sm btn-warning DelItem"
 title="Supprimer"><span class="glyphicon glyphicon-remove icon-white"></span></button>
     </div>
   </div>
   {{/if}}

   <div class="infos">
     {{{getItemInfo}}} <!-- This one will call the Template.myItem(data) -->
   </div>

   <div class="centerContentImage">
   {{#if image}}
     <a href="{{link}}" class="item item-{{status}}" target="_blank"><img src="/img/annonces/{{_id}}" /></a>
     {{#if notCurrentUserAndHasDetail}}<button class="btn btn-info Openitem"><span class="glyphicon glyphicon-
 zoom-in"></span></button>{{/if}}
   {{else}}
   {{else}}
     <a href="{{link}}" class="item item-{{status}}" target="_blank"><img src="/img/no_photo_icon.jpg" /></a>
     {{#if notCurrentUserAndHasDetail}}<button class="btn btn-info OpenDetailItem"><span class="glyphicon glyphicon-
 zoom-in"></span></button>{{/if}}
   {{/if}}
   </div>
 </template>

And the code of the JS :

So how can i do this ?

Thanx

Upvotes: 1

Views: 994

Answers (1)

Rebolon
Rebolon

Reputation: 1307

ok, thanks to @ChristianFritz i looked more at the template, and in fact i found that Iron-Router provide a {{link}} helper. The problem is that my Json Object has a property named 'link', Iron-Router is not able to make the difference and it generates an error. The Error is not really explicit

You called Router.path for a route named undefined but that that route doesn't seem to exist. Are you sure you created it?

But when using Iron Router we should have a look at the provided helpers because their naming is not using any kind of Namespace that would prevent that kind of problem.

Upvotes: 1

Related Questions