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>
Related
I'm new to Meteor.js and have run into a problem.
I am passing in a user object to a profile template e.g.:
{
_id: "D8JpXRQskm3grykjg",
username: "foo",
profile: {communities: ["AkGCakz6mSgMb8qyS", "j8aB3i5iscrC4ehkA"]},
}
<template name="profile">
<h1> {{username}}: {{_id}} </h1>
<h3>Communities</h3>
<hr>
{{#each profile.communities}}
{{> communityItem}}
{{/each}}
</template>
The problem is I've already written a communityItem template that I am using elsewhere which accepts the communityName. Is there a way that I can write a helper function, passing in the communityIds list that would return a list of community names? I would like:
...
{{#each getCommunityNames(profile.communities)}}
{{> communityItem}}
{{/each}}
...
I could very well be approaching the problem the wrong way or not writing in a "Spacebars" fashion. Thanks!
sure you can:
Template.myTemplate.helpers({
getCommunityNames: function(commIds) {
var communities = Communities.find({_id: {$in: commIds}}).fetch();
return _.pluck(communities, 'name'); // returns ['Name 1', 'Name 2'];
}
});
Note, the syntax method param not method(param)
{{#each getCommunityNames profile.communities}}
{{>communityItem}}
{{/each}}
How can I pass the current path in a meteor template as in
{{> sometemplate somearg="{{currentpath}}" }}
Where current path is basically what would be returned by window.location.pathname
You can use a simple helper for this:
Template.parentTemplate.helpers({
currentPath: function() {
return window.location.pathname;
}
});
And call it in your template using:
<template name="parentTemplate>
{{!-- ... --}}
{{> sometemplate somearg=currentPath }}
</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?', {
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}}
Using data of the form:
users =
_id: 'foo'
books: [
{name: 'book1'}
{name: 'book2'}
]
<template name="user">
{{#each get_users}}
{{> shelf}}
{{/each}}
</template>
<template name="shelf">
{{#each books}}
{{> book}}
{{/each}}
</template>
<template name="book">
<div contenteditable="true" data-id="{{_id}}">{{name}}</div>
</template>
I want _id in the book template to refer to the _id of the user, but _id is not in scope inside the book template. I'd like to be able to do something like {{> book _id}}, but that doesn't work, I think because book can only have one argument, and that is each {name: 'book1'} doc.
Use a custom block helper. It would be nicer if Meteor allowed multiple arguments for custom block helpers (this is supported in Handlebars). Since it doesn't (see the the wiki), this is the best I came up with, passing a modified this to the subtemplate book.
<template name="shelf">
{{#my_iterator}}
{{> book}}
{{/each}}
</template>
Templates.shelf.my_iterator = (options) ->
html = "
for book in this.books
this.name = book.name
html += options.fn this
html