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}}
Related
I am using Iron Router, and I want to get the parameter from a URL and place it in my template file. For example:
http://localhost:3000/categories/electronics
In my template file:
<template name="category_products">
<p>Sorry, there are no _____ products.</p>
</template>
I want to replace _____ with electronics so the output will be
Sorry, there are no electronics products.
Assuming you've defined a route, you can get the parameters using this.params. You can also provide template with a data context that is an object that includes multiple keys:
Router.route('/categories/:name',()=>{
this.render('category_products', {
data: function () {
return {
cursor: Products.find({categoryName: this.params.name}),
category: this.params.name
};
}
});
});
html:
<template name="category_products">
{{#if cursor.count()}}
{{#each cursor}}
{{name}}
{{/each}}
{{else}}
<p>Sorry, there are no {{category}} products.</p>
{{/endif}}
</template>
I'm currently working my way though "Your Second Meteor Application" and have been enjoying it so far. Everything I have created works but I do not understand why the following works but the code at the end does not.
Template
<template name="list">
<ul>
{{#each list}}
<li>{{name}}</li>
{{/each}}
</ul>
</template>
<template name="listPage">
<h2>Tasks: {{name}}</h2>
</template>
Route
Router.route('/list/:_id', {
template: 'listPage',
data: function(){
var currentList = this.params._id;
return Lists.findOne({_id: currentList});
}
});
This is giving the expected results. However, I was curious why the following will not work as it seems to be passing the exact same thing. The only differences with the following are:
changing the Router.route('lists/:_id') to Router.route('lists/randomParm')
this.params._id to this.params.randomParm
Template
<template name="list">
<ul>
{{#each list}}
<li>{{name}}</li>
{{/each}}
</ul>
</template>
<template name="listPage">
<h2>Tasks: {{name}}</h2>
</template>
Route
Router.route('/list/randomParm', {
template: 'listPage',
data: function(){
var currentList = this.params.randomParm;
return Lists.findOne({_id: currentList});
}
});
The message I am getting is:
Oops, looks like there's no route on the client or the server for url: "http://localhost:3000/list/TGM9dbRRtspyJy7AR."
Isn't :_id and randomParm holding the same values? An id of list items from the HTML links that are being passed to the routing url and being used to make a mongo call? I don't quite understand how :_id and randomParm are different when I am hitting the same routing URL.
Param shold be with :
So your route will be
Router.route('/list/:randomParm', {
If this param is optional then leave ? after
Router.route('/list/:randomParm?', {
I'm using Meteor for creating web application. I have defined my layout is:
<template name="default_layout">
{{> header}}
body code here
{{> footer}}
</template>
And here is my routing file:
Router.configure({ layoutTemplate: 'default_layout'
});
Router.map(function() { this.route('post_list', {path: '/'});
});
So. I have two questions:
How to make template post_list go into body code of default_layout template ?
Base on each layout for mapping page, maybe header and footer change content respectively. So, how to contact between template? For example, post_list template will set some value for header template ...
Thanks :)
Use the {{> yield}} helper. This will insert whatever template your route is serving. So.
<template name="default_layout">
{{> header}}
{{> yield}}
{{> footer}}
</template>
If you want to change what goes into the header, you will be using "yield regions.
<template name="default_layout">
{{> yield "header"}}
{{> yield
{{> yield "footer"}}
</template>
Then, in, say, a route controll you could do this:
PostController = RouteController.extend({
yieldRegions: {
'postHeader': {to: 'header'},
'postFooter': {to: 'footer'}
}
})
Then in your post_list route, do this:
Router.route('post_list', function(){
controller: 'postController'
});
Basically, you are creating a controller that can be re-used for certain routes, and telling the controller to put a template called "postHeader" into the {{> yield "header"}} region and "postFooter" into the {{> yield "footer"}} region.
I'm new to Meteor and have limited experience with javascript. I've searched all the stack post and the web for a good tutorial on how to use the Iron Router package to route static pages and just can't seem to figure it this out. I would love to have someone help me understand how to setup a router.js file for Home and About. I've played with my code a lot but this is what I had before posting here. Conseptually I seem to be struggling to grasp how the routing works and all the various features of iron router and then connecting these routes into a nav bar where I can navigate between them. Thank you in advance for any help you can provide.
client/templates/application/layout.html
<template name="layout">
<div class="container">
{{> yield}}
</div>
</template>
lib/router.js
Router.configure({
layoutTemplate: 'layout'
});
Router.route('/', function () {
this.render('home', {
template: 'home'
});
this.render('about', {
template: 'about'
});
});
templates/home.html
<template name="home">
<div class="container">
<h2>Home</h2>
</div>
</template>
The code you have above looks correct.
One quirk is you're rendering two pages for your / route. You should have this:
Router.route('/', function () {
this.render('home', {});
});
Router.route('/about', function() {
this.render('about', {});
});
Remember this.render takes the first param as the template, so there's no need to define it separately anymore.
And a new about.html page:
<template name="home">
<div class="container">
<h2>Home</h2>
</div>
</template>
Now you can use the / and /about pages (at least I hope i've not missed anything)
You can have 3 templates on your folder
Client/Views
with the name of
about.html
main.html
admin.html
layout.html
(for example)
So in the about.html you have this
<template name="about">
<h1> hello from about page
</template>
<template name="main">
<h1> hello from about page
</template>
<template name="admin">
<h1> hello from about page
</template>
the Layout.html file need con taints this yield rendered.
<template name="layout">
{{> yield}}
{{admin}}
{{about}}
{{main}}
</template>
So you can use layout template as a master page and calling that 3 templates separates by a route, how to assign a route and telling meteor to use that layouts, well use this js code
JS
Router.configure({
layoutTemplate: 'layout'
});
Router.map(function(){
this.route('admin', {path: '/admin'});
});
Router.map(function(){
this.route('about', {path: '/about'});
});
Router.map(function(){
this.route('main', {path: '/'});
});
At least this works for me bro, hope this work for you
I have an application built with Meteor that uses Iron Router. My layout uses multiple yield templates and I'd like to pass through different data to each one.
It successfully passes through tasks to the tasksList template, but doesn't pass through selectedTask to the taskDetail template.
Is it possible to have multiple data sources and is this the right way to go about it? And if yes, then why is it not working?
Thanks in advance! :-)
Router.map(function() {
this.route('tasksList', {
path: '/',
layoutTemplate: 'layout',
template: 'tasksList',
yieldTemplates: {
'taskDetail': {to: 'rightTemplate'}
},
data: {
tasks: function(){ return Tasks.find() },
selectedTask: function() { return Tasks.findOne() }
}
});
});
<template name="layout">
<section class="wrapper">
<div class="left-pane">
{{yield}}
</div>
<div class="right-pane">
{{yield 'rightTemplate'}}
</div>
</section>
</template>
<template name="tasksList">
<ul>
{{#each tasks}}
<li>{{detail}}</li>
{{/each}}
</ul>
</template>
<template name="taskDetail">
{{#each selectedTask}}
<div>{{detail}}</div>
{{/each}}
</template>
You are returning selectedTask as a single object (with findOne), but in the taskDetail template, you use {{#each selectedTask}}{{detail}}{{/each}}. What happens if you simply have {{detail}} as the body of that template?
Sorry, both those methods work for me now. I must have had a wrong template name or something similar.
You can have multiple data sources as shown in the examples above.