I need to pass the variable to helper function Please help me.
<div class="sidebar">
<ul class="dropdown-menu" style="display: block; position: static;">
{{#each search_family_list}}
<li class="dropdown-submenu active"><img src="" />{{ description }}
<ul class="dropdown-menu">
{{#each material_list}}
<li>atlanta</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
</div>
In the above example i need to pass the family_id to the material_list helper function.
Template.header.helpers({
material_list: function ()
{
return Session.get("search_family_list");
}
});
Please help me.
It is likely you can access family_id as a property of this inside your helper.
Template.header.helpers({
material_list: function () {
var family_id = this.family_id;
return Session.get("search_family_list");
}
});
The function context of a template helper can be used to access the current data context.
Related
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}}
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.
I have a navbar widget that is generating links for top level navigation.
When the set of pages are for alliance leaders the iron-router paths look like :
'/alliance/:allianceId/players'
for the regular players looking at the regular player navbar the iron-router paths like:
'/player/:playerId/inventory'
I want the navbar to not care what the route parameters are. I want the navbar template to just take a map of values
<template name="navbar">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <!-- -->
<ul class="admin-tabs">
{{#each routes}}
<li class="{{tabActiveClass}}"><a href="{{pathFor pageName data=data}}">
<i class="glyphicon {{additionalClass}}"></i> {{displayName}}</a>
</li>
{{/each}}
<li>
{{> loginButtons}}
</li>
</ul>
</nav>
</template>
with the
_.extend(Template.navbar, {
...
data: function() {
var routeController = Router.current(true);
if ( routeController == null){
return void(0);
} else {
debugger;
return routeController.params;
}
},
...
});
However, this is not working. Does anyone have a suggestion on how to fix this problem?
I believe you should either wrap your code:
{{#with data}}
...
{{/with}}
or use params=data instead of data=data.
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.