I would like to load a meteor template using iron-router but the template that I'm loading needs to be dynamic, I have tried a couple different approaches but none are working.
My router
Router.route('/forms/add-form/:template', {
name: 'addForm',
layoutTemplate: 'layoutApp',
waitOn: function() {
return Meteor.subscribe('producersList');
},
data: function() {
return Producers.find();
}
});
The router go
Router.go('addForm', {template: this.template});
The url is fine now I first tried having this in my router
name: this.params.template,
But that doesn't work I'm now trying the following in my addForm template
{{> UI.dynamic template=formToLoad data=myDataContext}}
formToLoad:function(){
console.log('aaaa ' + this.template);
}
});
You can pass data into template in route:
Router.route('/forms/add-form/:template', {
name: 'addForm',
layoutTemplate: 'layoutApp',
waitOn: function() {
return Meteor.subscribe('producersList');
},
data: function() {
return {
producers: Producers.find(),
formToLoad: this.params.template //here pass the template name
}
}
});
and in your template:
<template name="addForm">
{{> Template.dynamic template=formToLoad}}
</template>
Now if we run:
Router.go('addForm', {template: 'someTemplateName'});
It should load template with name 'someTemplateName'. Use camelCase syntax for template names because you will get syntax error with 'some-template-name' when you will define helpers or events for template.
Related
I am trying to render a template on a given page but I get the following error:
Couldn't find a template named "adPage" or "adPage". Are you sure you defined it?
myapp/lib/router.js
This is how I defined the route:
Router.route("/dashboard/adpage/:_id", {
// name:"adPage",
template:"adPage",
data:function(){
return Ads.findOne({_id: this.params._id});
},
onBeforeAction : function()
{
if(Meteor.userId())
{
//user is loggedin continue the route
this.next();
}
else {
console.log("user not loggin, redirect to login page");
this.render('login');
}
},
onAfterAction: function(){
document.title = 'Annonce';
},
waitOn:function(){
return Meteor.subscribe("adDetails",this.params._id);
}
});
myapp/client/main.html
<template name="main">
...
{{> yield}}
...
</template>
myapp/client/adPage/adPage.html
<template name="adPage">
{{title}}
...
</template>
myapp/client/adPage/adPage.js
Template.adPage.onCreated(function() {
console.log("on created");
});
If I move the adPage template to my main.html file, I no longer have the error (I can see the title) but the onCreated is not called.
I tried to put everything in the same client folder and renaming adPage.js to _adPage.js and everything worked as expected.
So I suspect something wrong with the load order but can't figure out what...
Thanks !
If you are using an adblocker. Try to disable it. Its probably because of the filename
Using Iron Router, I understand how to set data for a template. But how do I send data to a layout that was globally defined?
I set the router layout by:
Router.configure({ layoutTemplate: 'NAME' })
This will set the layout for all my routes.
However from my individual routes, I'd like to send data to the layout template.
The layout uses the data context defined with data in the route option. Here is an excerpt from Iron Router documentation:
Router.route('/routeName', {
...
// A data function that can be used to automatically set the data context for
// our layout. This function can also be used by hooks and plugins. For
// example, the "dataNotFound" plugin calls this function to see if it
// returns a null value, and if so, renders the not found template.
data: function () {
return Posts.findOne({_id: this.params._id});
},
...
}
We can also set the data context of the layout with this.layout like this:
Router.route('/routeName', function () {
this.layout('layoutName', {
data: function() {
return CollectionName.find();
}
});
});
In addition, we can refer to an existing layoutTemplate option like this:
Router.route('/routeName', function () {
this.layout(this.lookupOption('layoutTemplate'), {
data: function() {
return CollectionName.find();
}
});
});
Router.configure({
layoutTemplate: 'NAME',
data: function() {
return CollectionName.find();
}
});
As described in the Global Default Options in the iron:router docs:
You can set any of the above options on the Router itself...
Where 'above options' is referring to any of the Route Specific Options
You can also subscribe to a published Collection:
Router.configure({
layoutTemplate: 'NAME',
subscriptions: function() {
this.subscribe('CollectionName');
}
});
I have a Meteor template in HTML-file:
<template name='main'>
</template>
I rendered it using Iron router:
Router.route('/', function () {
this.render('main');
});
Now I want to render another template to replace 'main' template. How to do it?
Obviously you do not want another route?
If not you can use a reactive var in the router. When you change the variable it will run again and render your other template.
See http://eventedmind.github.io/iron-router/#hooks
var OnBeforeActions;
OnBeforeActions = {
whichMain: function() {
if (reactiveVar) {
this.render('otherMain');
}
else
this.next() ;
}
};
Router.onBeforeAction(OnBeforeActions.whichMain, {
only: ['Main']
});
Alternatively use a dynamic template inside your main router.
https://www.discovermeteor.com/blog/blaze-dynamic-template-includes/
This is my route:
this.route('showItem', {
path: '/item/:_id',
template: 'layout',
yieldTemplates: {
'content': {to: 'content'},
'item_details': {to: 'details'}
},
notFoundTemplate: 'notFound',
data: function () {
return null; //for test
}
})
And notFound template, it's simple:
<template name="notFound">
Not found!
</template>
And I can't understand, why always renders item_details and never notFound.
I think it was Iron-Router 0.7 they added a requirement where you had to switch on global hooks:
Router.onBeforeAction("dataNotFound");
This is the one for not found templates. There is a bit of info on it on this issue. The reasoning behind this change is that you can customize the functions that decide whether data is found or not.
I have a small meteor app going with iron router. Here's my routes.js, which is available to both client and server:
Router.configure({
layoutTemplate: 'defaultLayout',
loadingTemplate: 'loading'
});
// Map individual routes
Router.map(function() {
this.route('comicCreate', {
path: '/comic/create'
});
this.route('comicDetails', {
onBeforeAction: function () {
window.scrollTo(0, 0);
},
path: '/comic/:_id',
layoutTemplate: 'youtubeLayout',
data: function() { return Comics.findOne(this.params._id); }
});
this.route('frontPage', {
path: '/',
layoutTemplate: 'frontPageLayout'
});
this.route('notFound', {
path: '*',
where: 'server',
action: function() {
this.response.statusCode = 404;
this.response.end('Not Found!');
}
});
});
I need to feed some fields from my comic collection document into a package that wraps Youtube's IFrame API, and I'm doing this via the rendered function:
Template.comicDetails.rendered = function() {
var yt = new YTBackground();
if (this.data)
{
yt.startPlayer(document.getElementById('wrap'), {
videoIds: this.data.youtubeIds,
muteButtonClass: 'volume-mute',
volumeDownButtonClass: 'volume-down',
volumeUpButtonClass: 'volume-up'
});
}
};
This works great when I start by going to localhost:3000/ and then clicking on a link set to "{{pathFor 'comicDetails' _id}}". However, if I go directly to localhost:3000/comic/somevalidid, it doesn't, despite the fact that both routes end up pointing me at the same url.
The reason appears to be that when I go directly to the deep link, "this.data" is undefined during the execution of the rendered function. The template itself shows up fine (data correctly replaces the spacebars {{field}} tags in my template), but there's nothing in the "this" context for data when the rendered callback fires.
Is there something I'm doing wrong here?
try declaring the route in Meteor.startup ... not sure if that's the problem but worth a try