I want to display all registered accounts in my meteor app. I published and subscibed to the Meteor.users collection and build a template to show email-addresses. The problem is I don't understand how I should navigate the data.
<template name="contacts">
<br>
<ul class="list-group">
{{#each users}}
<li class="list-group-item">
<span class="badge">14</span>
{{emails}}
</li>
{{/each}}
</ul>
</template>
{{emails}} is an array with json-objects and I don't know how to handle it to get the "address" field displayed.
This is my JS:
Template.kontakte.users = function (){
return Meteor.users.find();
}
First create a subtemplate, looks better:
<template name="contacts">
<ul class="list-group">
{{#each users}}
{{> user}}
{{/each}}
</ul>
</template>
<template name="user">
<li class="list-group-item">
<span class="badge">14</span>
{{email}}
</li>
</template>
In template user the userObject is available via this pointer. The email can be shown with helper functions.
Template.user.helpers({
email: function() {
return this.emails[0].address;
}
});
Note, this just shows the first email in your array.
Related
In the document handlebars
{{#each articles.[10].[#comments]}}
<h1>{{subject}}</h1>
<div>
{{body}}
</div>
{{/each}}
but I want such use it
{{#each nav-list.value}}
<li class="nav-{{#index}}">
{{{../[content.value].value}}}
</li>
{{/each}}
Obviously， it dons't work! How should I implement this...
I am having a silly trouble with nested templates. I want to create a dropdown menu with 4 main categories and about 2-3 subcategories for each main category.
<template name="Warehouselist">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> {{warehouse}} <span class="caret"></span></a>
<ul class="dropdown-menu">
{{#each Forms}}
{{>Form}} //Pass {{warehouse}} here
{{/each}}
</ul>
</li>
</template>
<template name="Form">
<li id="EWPacking">{{FormName}}</li>
</template>
The problem is that I don't know how to pass the {{warehouse}} data to the child template's helper in order so I can do something like this.
Template.bonus.helpers({
Userform: function(){
return UserForms.find({});
},
warehouse: function(){
return Warehouse.find({});
},
});
Template.Warehouselist.helpers({
Forms: function(Warehouse){
return Forms.find({Warehousename:Warehouse});
}
});
The point is that the helper of the child template has to return different data, depending on what is the Category of the parent element.
Use parent data context in the child template 'Form':
<template name="Warehouselist">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{warehouse}}<span class="caret"></span>
</a>
<ul class="dropdown-menu">
{{#each Forms}}
{{>Form}}
{{/each}}
</ul>
</li>
</template>
<template name="Form">
<li id="EWPacking">
{{FormName}} - {{../warehouse}}</li>
</template>
And change your javascript for the Warehouselist template helper. Get the warehouse from the data context with Template.currentData() and pass it in the Forms.find().
Like this:
Template.Warehouselist.helpers({
Forms: function(){
var warehouse = Template.currentData().warehouse;
console.log('warehouse:', warehouse);
return Forms.find({Warehousename: warehouse});
}
});
If you want to pass warehouse to the child template like you asked use:
(BUT: this is not needed if you follow the solution above!)
{{#each Forms}}
{{>Form warehouse=warehouse}}
{{/each}}
I'm doing category sidebar template for online shop. I will use that in 2 places - on customer, and admin side. Each one will have own service of clicking on category. I want to pass parameter "redirect" which will decide what action will be done, but the problem is, that parameter isn't visible in nested templates - only in 1st level categories.
HTML :
<template name="categoriesSidebar">
<ul>
{{#each mainCategories}}
<li>
{{> categoriesSidebarItem redirect=true data=this }}
</li>
{{/each}}
</ul>
</template>
<template name="categoriesSidebarItem">
<a href="#">
{{data.name}}
</a>
{{#if data.subCategories.length}}
<ul>
{{#each subCats }}
<li>
{{> categoriesSidebarItem redirect=redirect data=this }}
</li>
{{/each}}
</ul>
{{/if}}
</template>
Javascript :
Template.categoriesSidebar.helpers({
mainCategories: function() {
return Categories.find({'categoryLevel' : 1});
}
});
Template.categoriesSidebarItem.helpers({
subCats : function(){
return Categories.find({_id:{$in: this.data.subCategories}});
}
});
Template.categoriesSidebarItem.events({
'click a' : function(event){
if(this.redirect == true){
Router.go('category',{_id : this.data._id});
return false;
}else{
//categoryId is ReactiveVar used in another template
categoryId.set(this.category._id);
}
}
})
Result :
Women
Nike
Men
Nike
Adidas
Women and Men category work well , after clicking on them, "redirect" is seen as true and Router redirects to desired route, but for nested categories, "redirect" parameter is undefined.
How to pass that parameter to nested template ?
Change the code to this:
{{#if data.subCategories.length}}
<ul>
{{#each subCats }}
<li>
{{> categoriesSidebarItem redirect=../redirect data=this }}
</li>
{{/each}}
</ul>
{{/if}}
The each block changes the data context, so you need to retrieve redirect from the parent data context. That's what ../ does.
rather a theoretical question - how can I render recursive templates in Meteor? For example, displaying a comment on comment with unlimited number of comment sub-levels so that HTML would be diplayed as the following?
<section>
some text
<section>
nested text
<section>
further nested text and sections
.....
</section>
</section>
</section>
In my case I pass to the "tree" template a mongoDB document and this document can have unlimited number of sub-content levels. My example below doesn't work the way I want.
<template name="tree">
<div class="wrapper" style="border:1px solid red">
<ul>
{{#each getStructure}}
<li>
{{#each content}}
<ul>
<li>
<a class="item">{{text}}</a>
<!-- TODO: this stuff needs to be recursive.
{{#if sub_content}}
<ul>
{{#each sub_content}}
<li>
<a class="item">{{text}}</a>
{{#if sub_content}}
....
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
</li>
</ul>
{{/each}}
</li>
{{/each}}
</ul>
</div>
</template>
A simplified example of recirsuve, say you had a post sample template of:
<template name="post">
{{post_text}}
{{#each comments}}
{{>comment}}
{{/each}}
</template>
and a post helper of:
Template.post.helpers({
comments: function() {
return CommentCollection.find({post_id: this._id, parent_id: {$exists: 0}});
}
});
I would create a template for the comment layout and provide a helper in that for sub-comments, depending on your data structure something like the following:
<template name="comment">
{{comment_text}}
{{#each sub_comment}}
{{> comment}}
{{/each}}
</template>
and then the helper along the lines of:
Template.comment.helpers({
sub_comments: function() {
return CommentCollection.find({parent_id: this._id});
}
});
This would recursively produce the comments template for each sub-comment then roll back up the tree to the next #each and then print that comment and all of its sub-comments etc.
I've a few code that I want to run only when there's noUser and a few when there's a currentUser.
All these are inside the navigation template. Like so...
{{#if currentUser}}
<li class="nav">Post
</li>
<li class="nav"><a>Ola, {{thisUser}}!</a>
</li>
<li class="nav">Log Out
</li>
{{/if}}
{{#if noUser}}
<li class="nav">Sign Up
</li>
<li class="nav">Login
</li>
{{/if}}
So the problem is that when there's a currentUser(i.e, I'm logged in) and I refresh the page, the code inside the {{#if noUser}} block shows up first then the {{#if currentUser}} block, while the {{#if noUser}} block was only meant to show up when there is no user.
Here's the helper code for the template..
Template.navigation.helpers({
thisUser: function () {
return Meteor.user().username;
},
noUser: function () {
var user = Meteor.user();
if (!user) {
return true;
};
}
});
Don't know what am I doing wrong here. :(
Please help.
You should use if else conditions instead of noUser helper. And to prevent showing "noUser" block while logging in you have to use {{ loggingIn }} helper. Something like this:
{{#if loggingIn}}
<p>Loggin in...</p>
{{else}}
{{#if currentUser}}
<li class="nav">Post
</li>
<li class="nav"><a>Ola, {{thisUser}}!</a>
</li>
<li class="nav">Log Out
</li>
{{else}}
<li class="nav">Sign Up
</li>
<li class="nav">Login
</li>
{{/if}}
{{/if}}
Because Meteor does not know immediately whether user is logged in or not. Therefore you have to use loggingIn helper.
Why don't you refactor your code like this ?
{{#if currentUser}}
<li class="nav">Post
</li>
<li class="nav"><a>Ola, {{thisUser}}!</a>
</li>
<li class="nav">Log Out
</li>
{{else}}
<li class="nav">Sign Up
</li>
<li class="nav">Login
</li>
{{/if}}
You might want to have a look to http://docs.meteor.com/#meteor_loggingin to show a loading indicator if needed.