I have the following setup in my Iron Router config:
Router.map(function () {
this.route('test', {
path: '/test',
template: 'test'
});
this.route('test_post_pay', {
path: '/test/:optionalParm?',
template: 'test',
data: {
message: 'thank you for donation'
}
});
});
As you can see, they both point to the same template but one supplies a message variable, is there a way to check for this variable in my Meteor code when the page loads? I want to pop a modal up if there is a message being provided by Iron Router
You can use a conditional statement in your handlebars template.
In this case it would be
{{#if message}}
<div class="modal">{{message}}</div>
{{/if}}
Related
I am a newbie in Meteor. I am developing an app having a login page that must redirect to certain pages as per the login id.There are certain click events which opens up html pages.I have the hard code data in the pages to check the flow now.I have the html pages as well designed, but I am not able to link them for click events and login. Please help.
Here is one way to do it:
In your HTML file, something like this:
<head>
<title>Duckbilled Platypus</title>
</head>
<template name='layout'>
{{> banner}}
{{> yield}}
</template>
<template name="banner">
<h1 class="chocolatefont">Platypi of the World Unite! (Duckbilled, that is)</h1>
<hr/>
</template>
<template name="main">
<div id="templateMain" name="templateMain">
<h2>RAVES</h2>
<p>No Raves yet</p>
<h2>RANTS</h2>
<p>No Rants yet</p>
<h2>RANDOM</h2>
The Legend of NFN Oscar
<br/><br/>
NFN Oscar's donut
<br/><br/>
Alliteration Station ("Ben's Bizarre Bazaar")
<br/><br/>
Boomeranging Telescopic and Kaleidoscopic Phrase Mazes
<br/><br/>
Acrostics
<br/><br/>
Homonym Homie
</div>
</template>
...and then add whichever templates you want for the pages you want to route to; in my case, it's one for each "href" referenced in the anchor tags (nfnoscar, nfnoscarsdout. etc.)
The "yield" (which means, "insert here whatever the router says corresponds to the URL") requires Iron:Router, which you say you already have.
In your JS file, something like this:
Router.configure({
layoutTemplate: 'layout'
});
Router.route('/', {
name: 'main',
template: 'main'
});
Router.route('/nfnoscar', {
name: 'nfnoscar',
template: 'nfnoscar'
});
Router.route('/nfnoscarsdonut', {
name: 'nfnoscarsdonut',
template: 'nfnoscarsdonut'
});
Router.route('/alliterationstation', {
name: 'alliterationstation',
template: 'alliterationstation'
});
Router.route('/btakpm', {
name: 'btakpm',
template: 'btakpm'
});
Router.route('/homonyms', {
name: 'homonyms',
template: 'homonyms'
});
Router.route('/acrostics', {
name: 'acrostics',
template: 'acrostics'
});
Now, whichever link is clicked, the corresponding page is loaded by means of the "yield" and the Iron Router routing.
You can see this particular app and how it works when you click the links, etc., at my "sandbox" Meteorsite here.
I have a route that has a parameter in it and I need to access it from many different templates. Below is one example of the route, there are several routes that are very similar just after the _occasionnId parameter it changes:
For example:
Route 1: /occasions/:_occasionId/cards/
Router 2: /occasions/:_occasionId/tables/
Here is my full code for each route, the only thing that really changes is the route path and the template.
Router.route('/occasions/:_occasionId/cards/', {
template: 'cards',
data: function(){
//var currentoccasion = this.params._occasionId;
//console.log(currentoccasion);
},subscriptions : function(){
Meteor.subscribe('cards');
Meteor.subscribe('tables');
}
});
I need to get the _occasionId parameter into a template that has navigation which goes in on all of these pages. My goal is that from Route 1, you can go to Router 2. But I can't figure out how to add the correct URL in the template.
My template is:
<template name="occasionnav">
<nav>
<div class="nav-wrapper">
<ul class="right hide-on-med-and-down">
<li>cards</li>
<li>tables</li>
</ul>
</div>
</nav>
</template>
In the 'occasionnav' template by ":_occasionId" I need that to be the same parameter as the page currently being viewed be stuck into here.
If anyone has any insight or advice on the best way to approach this I would really appreciate it.
I recommend to use {{pathFor}} if you want to render an internal route in your Meteor application.
You just need to set the proper context and name your routes, for example:
<template name="occasionnav">
<nav>
<div class="nav-wrapper">
<ul class="right hide-on-med-and-down">
{{#with occasion}}
<li>cards</li>
<li>tables</li>
{{/with}}
</ul>
</div>
</nav>
</template>
Router.route('/occasions/:_id/cards/', {
template: 'cards',
name: 'occasions.cards',
data: function() {
return Cards.findOne({_id: this.params._id});
},
subscriptions: function() {
return Meteor.subscribe('cards', this.params._id);
}
});
Router.route('/occasions/:_id/tables/', {
template: 'tables',
name: 'occasions.tables',
data: function() {
return Tables.findOne({_id: this.params._id});
},
subscriptions: function() {
return Meteor.subscribe('tables', this.params._id);
}
});
However, you can also get the router parameters in your template via Router.current().params.
You can pass the _occasionId as a template helper and render it in jade like:
<li>cards</li>
You should try :
Router.route('/occasions/:_occasionId/cards/', function() {
this.layout("LayoutName");
this.render("cards", {
data: {
currentoccasion = this.params._occasionId;
}
});
});
When you use Router.map, it's not exactly the same syntax:
Router.map(function() {
this.route('<template name>', {
path: 'path/:_currentoccasion',
data: function () {
return {
currentoccasion: this.params._currentoccasion
}
}
});
And you can access just like that in your template :
Like an helper
{{ currentoccasion }}
Or on the onRendered and onCreated functions
Template.<template name>.onRendered({
this.data.currentoccasion
Im getting started Meteor , I use iron router to manipulate route..
so I want to pass a variable to template:
Router.route('/foo', function(){
this.render('foo', {name: 'Stack'});
});
how i can show the variable name in the template foo:
<template name="foo">
<h2>Hi bro, how i can show the variable name here ?? </h2>
</template>
my project folder as the following structure:
/client
---/views
------foo.html
---/layout
------layout.html
/public
/server
layout.html:
<template name="layout">
{{> yield}}
</template>
any solutions please :)
In your routing:
Router.route('/foo', function(){
this.render('foo', {data: {name: 'Stack'}});
});
In your template
<template name="foo">
<h2>Hi bro, how i can show the variable name here ?? </h2>
<p>Like this --> {{name}}</p>
</template>
You can pull variables from the route too:
Router.route('/foo/:someName', function(){
this.render('foo', {data: {name: this.params.someName}});
});
See Iron Router docs for more info
You can define a template helper to get the router name:
Template.foo.helpers({
name: Router.current().route.getName()
});
And then display in your template as:
{{name}}
Hi I'm following the Discover Meteor book, and I'm in Chapter 5-3. I have the router.js and post_item.html precisely as the book, and for every url, I get something like /posts/undefined<id>. I can't figure out why undefined is present in front of every id. Below is my relevant code:
Router.configure({
layoutTemplate: 'layout',
loadingTemplate: 'loading',
waitOn: function() { return Meteor.subscribe('posts'); }
});
Router.route('/', {name: 'postsList'});
Router.route('/posts/:_id', {
name: 'postPage',
data: function() { return Posts.findOne(this.params._id); }
});
<template name="postItem">
<div class="post">
<div class="post-content">
<h3>{{title}}<span>{{domain}}</span></h3>
</div>
Discuss
</div>
</template>
This was an issue caused in the 1.0.8 release as you can check here. Update the package to the 1.0.9 release typing in the console meteor update or manually meteor add iron:router#1.0.9 and it should work.
In my Meteor app, I have two yield blocks: one for my global navbar and the other for my main content:
<template name="layout">
<div>
{{> yield region='navRegion'}}
</div>
<div>
{{> yield}}
</div>
</template>
How can I add an Iron Router Controller into my routes so that I can pass data into my global navbar (since it doesn't have a route)? Is it possible to run the two controllers at the same time? Or do I have to rely on helpers for the global nav?
Let's say the template that you were trying to render in the main {{> yield}} was named home. The following would work.
Router.configure({
layoutTemplate: 'layout'
});
Router.map(function () {
this.route('home', {
path: '/',
template: 'home',
yieldTemplates: {
'navRegion': {
to: 'navRegion'
}
}
});
});
Here's the answer from #cmather, which he answered on my other post:
How do I activate an Iron Router route without changing the path?
There is a one-to-one between a route and a route controller. You'll
only ever have one controller running at a time, based on the route
you're on. If you want to set a global value from a controller, and it
doesn't make sense to do it in the global data context, you can always
set a session value. For example: Session.set('currentId',
this.params._id) - #cmather