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}}
Related
Usually for a {{#each}} block, we can set the value directly in it like: {{#each users}}:
user: [
{name: 'foo'},
{name: 'bar'}
]
What I need to do is do be able to set the {{#each}} iteration value from a helper.
I have tried with this helper:
Handlebars.registerHelper('myHelper', function () {
return new Handlebars.SafeString('users');
});
## also tested with:
Handlebars.registerHelper('myHelper', function () {
return 'users';
});
and in my view:
{{#each (myHelper)}} # and {{#each myHelper}}
<p>{{name}}</p>
{{/each}}
But nothing get shown.
I appreciate if anyone can give me some pointers. Thanks in advance!
You can use a built-in function called lookup in order to achieve what you are trying to achieve.
Try:
{{#each (lookup . (myHelper))}}
{{name}}
{{/each}}
I'm trying to pass down the index of an item from an {{#each}} loop into a dynamic template, but am lost on how to get it there (in a clean way).
Current code:
{{#each item}}
{{Template.dynamic template=type data=this}}
{{/each}}
With this, {{#index}} is not accessible in the dynamically loaded template.
I also tried using a template helper, but it doesn't appear the index is tracked in the context.
{{#each item}}
{{Template.dynamic template=type data=itemData}}
{{/each}}
Template.items.helpers({
itemData() {
// can't access index in here
return this;
}
});
Can anyone advise on how I can achieve this?
Thanks!
Solved this using the following pattern:
... Template.Items
{{#each items}}
{{>Template.dynamic itemConfig #index}}
{{/each}}
Template.items.helpers({
itemConfig(index) {
const data = this;
data.index = index;
return {
data,
template: this.type //this.type is where im storing my template name
};
},
});
Using the #index as a helper param, and then Blaze uses the object as a config for the dynamic template!
:)
EDIT: I found another solution. Does the same job, and I prefer how it looks.
{{>Template.dynamic template=type data=(templateData #index)}}
Where templateData is essentially the same helper from before but just returns data with an index prop.
{{#each item}}
{{Template.dynamic template=type index=#index}}
{{/each}}
You can use 'index' in dynamic template to access index
I have a collection A which have an embedded array of different IDs.
These IDs are id of collection B.
How can I loop inside a template to all of these B's id and get the associated ?
A template :
<template name="Atemplate">
<h1>Name of A : {{name}}</h1>
{{#each Bs}}
{{> Btemplate}}
{{/each}}
</template>
B template :
<template name="Btemplate">
<h1>Name of B : {{name}}</h1>
</template>
what about B template.js ?
If I understand the question right, the context for Btemplate is an id. So in the name helper you could find the document by that id like so:
Template.Btemplate.helpers({
name: function() {
var doc = B.findOne(String(this));
return doc && doc.name;
}
});
Alternatively (and someone preferably) is to set the Btemplate context to an instance of a B:
Template.Atemplate.helpers({
allBs: function() {
return B.find({_id: {$in: this.Bs}});
}
});
You'd need to modify you A template code as follows:
{{#each allBs}}
{{> Btemplate}}
{{/each}}
And now you don't need to modify the original implementation of Btemplate. I'd also recommend reading the templates articles from here.
I'm currently making a simple web app with meteor.js . I'm trying to implement a simple feature for my fantasy football league's custom site that I'm building.
Here's my code that's not working.
{{#each users}}
{{#if Meteor.userId() {{_id}} }}
{{> ownTradingBlock}}
{{else}}
{{> userTradingBlock}}
{{/if}}
{{/each}}
So basically I want to render a different template if the user in the list of league members is the current user that is logged in. Does anybody have any thoughts on how this is creating an error, and/or if there's a better way to do it?
Here's the error code I'm getting.
.html:67 : expected space
You cannot use a Meteor method within Spacebars. For this you will need to create a helper:
Template.yourTemplate.helpers({
isEq: function (id) {
if (Meteor.userId() === id)
return true;
return false;
}
});
Then in your template:
{{#each users}}
{{#if isEq _id}} }}
{{> ownTradingBlock}}
{{else}}
{{> userTradingBlock}}
{{/if}}
{{/each}}
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