I searched through a lot of questions but hasn't found answer.
I use handlebars templates and have data structure:
{
privileged_users: [ "user1", "user2" ],
users: {
user1: { name: "N1" },
user2: { name: "N2" },
user3: { name: "N3" }
}
}
I wan't to output all privileged users with some template. Something like this:
<table>
{{#each privileged_users}}
<tr><td>{{../users.[this].name}}</td></tr>
{{/each}}
</table>
Is it possible without additional helpers?
If it isn't how can I write block helper with changing context to ../users.[this] ?
Register following helper:
Handlebars.registerHelper('lookupProp', function (obj, key, prop) {
return obj[key] && obj[key][prop];
});
Then modify the template like:
<table>
{{#each privileged_users}}
<tr><td>{{lookupProp ../users this 'name'}}</td></tr>
{{/each}}
</table>
Here is the working fiddle.
Previous one is just a simple expression helper.
Now here is a working jsfiddle according to question.
Handlebars has a built-in lookup helper since version 3.0.3.
An alternate to block helper could be Handlebars Partial Context approach i.e. define/register a partial and use it with different context in main template.
Related
I would like to make a template that can determine which partial it will render, such that
In Template:
{{#objectA}}
{{>partial}}
{{/}}
{{objectB}}
{{>partial}}
{{/}}
Where partial is a property with template value on objectA and objectB
Is there any reasonable way of doing this, or something similar in a single instance?
Checkout Partial Expressions aka dynamic partials they do exactly that based on resolution of the partial name as a reference. Assuming each object had a foo property:
{{#partial bar}}
bar partial!
{{/partial}}
{{#partial qux}}
qux partial!
{{/partial}}
{{#each items}}
<li>item {{>foo}}
{{/each}}
And data was like:
items: [
{ foo: 'bar' },
{ foo: 'qux' },
]
see http://jsfiddle.net/52k645wh/
In Handlebars 2+, how do I dynamically read a property in a loop like this? objects is an array of objects. keys is an array of strings. I want to loop each key for each object and put the its .foo value in the span.
{{#each objects}}
{{#each keys}}
<span>{{../this.{{this}}.foo}}</span>
{{/each}}
{{/each}}
Is this possible in plain Handlebars 2+? Or...is there a helper that does this?
I don't see the way how it can be done without helper.
With helpers everything is possible (but kind of ugly) in Handlebars.
For example, you could use something like this:
{{#each objects}}
{{#each keys}}
<span>{{lookupProp ../this this 'foo'}}</span>
{{/each}}
{{/each}}
And helper:
Handlebars.registerHelper('lookupProp', function (obj, key, prop) {
return obj[key] && obj[key][prop];
});
Look at the fiddle.
Handlebars has built-in lookup helper since version 3.0.3.
Okay... spent a few hours googling around and find a nice solution, as I had the same issue, but failed to find any...
I was as happy as Larry and jumped off my chair when I finally figured a way to get this working :D
This way, you can access object values with dynamic keys,
Demo object:
var categories = {
onion: { name: 'bar', id: 4 },
apple: { name: 'demo', id: 2 },
carrot: { name: 'foo', id: 3 },
Root: [
{ name: 'apple' },
{ name: 'onion' },
{ name: 'carrot' }
]
};
Instead of trying something like these: (which won't work)
{{#each categories.[#key]}}
or
{{#each categories.[mykey]}}
You can do:
{{#each categories.[Root] as |main-category|}}
{{#each (lookup ../categories main-category.name) as |sub-category|}}
{{sub-category.name}}
{{/each}}
{{/each}}
Hope it will help for someone else too :)
For anyone else that doesn't want to loop you could use with eg.
{{#with (lookup myObject myKeyVar) as |subObject|}}
{{subObject.key}}
{{/with}}
I imagine this has to be an elementary issue however I've been struggling through this for too long. I'm relatively new to Meteor.
I've viewed the documentation for the Meteor.user() (http://docs.meteor.com/#meteor_users) and can see how additional information is added to the user.profile. I.e.,
//JS file
Meteor.users.insert({
username: 'admin',
profile: {
first_name: 'Clark',
last_name: 'Kent'
},
});
How then do I display the profile information in the view template? I can access the user object via the view and web console (Meteor.user()) however I cannot access the object details.
My initial thoughts were that I could load the following in my handlebar templates but they do not work:
// HTML view
{{Meteor.user().username}}
{{Meteor.user().profile.first_name}}
{{Meteor.user().profile.last_name}}
Any help is greatly appreciated.
Your insert is correct.
But to show the information like the first name you have to provide a helper function.
Your html-template:
<template name="user">
<p>{{firstName}}</p>
</template>
Your js-code:
Template.user.helpers({
firstName: function() {
return Meteor.user().profile.first_name;
}
});
You can additionaly wrap the user template with the {{currentUser}} helper to be sure there is a user.
{{#if currentUser}}
{{> user}}
{{/if}}
If you don't want to define a proxy helper for different attributes of objects nested in {{currentUser}}, you can do the following purely in your template:
{{#with currentUser}}
{{#with profile}}
{{first_name}}
{{/with}}
{{/with}}
Updated to reflect comment suggestion.
In your templates, you'll want to use {{currentUser}} instead of {{Meteor.user()}}.
Docs
try this way
{{#with userDetails}}
First name:-{{this.first_name}}
Last name:- {{this.last_name}}
{{/with}}
//jsSide
userDetails(){
return Meteor.user();
}
When I use the built-in block helper #each, book templates are rerendered individually when changed:
users =
_id: 'foo'
books: [
{name: 'book1'}
{name: 'book2'}
]
<template name="user">
{{#each books}}
{{> book}}
{{/each}}
</template>
<template name="book">
<div>{{name}}</div>
</template>
When the data is changed - the first book name is set to 'bookone' instead of 'book1' - only the book template (the div containing 'book1') is rerendered. This is the desired behavior. When I use a custom block helper, the behavior is different:
<template name="user">
{{#each_with_id}}
{{> book}}
{{/each}}
</template>
<template name="book">
<div data-id="{{_id}}">{{name}}</div>
</template>
Templates.user.each_with_id = (options) ->
html = "
for book, i in this.books
this.name = book.name
html += Spark.labelBranch i.toString(), ->
options.fn this
html
Now when the name of the first book changes, the whole user template is rerendered.
It does not work as you expect, because the implementation of built-in each is based on the cursor.observeChanges feature. You will not be able to achieve the same exact result without using an auxiliary collection of some sort. The idea is quite simple. It seems that you don't have a "books" collection but you can create a client-side-only cache:
Books = new Meteor.Collection(null);
where you will need to put some data dynamically like this:
Users.find({/* probably some filtering here */}).observeCanges({
added: function (id, fields) {
_.each(fields.books, function (book, index) {
Books.insert(_.extend(book, {
owner: id,
index: index,
}));
}
},
changed: function (id, fields) {
Books.remove({
owner:id, name:{
$nin:_.pluck(fields.books, 'name')
},
});
_.each(fields.books, function (book, index) {
Books.update({
owner : id,
name : book.name,
}, {$set:_.extend(book, {
owner : id,
index : index,
})}, {upsert:true});
}
},
removed: function (id) {
Books.remove({owner:id});
},
});
Then instead of each_with_id you will be able to the built-in each with appropriate cursor, e.g.
Books.find({owner:Session.get('currentUserId')}, {sort:{index:1}});
You may also look at this other topic which basically covers the same problem you're asking about.
I'm running into a template context situation that I'm having a hard time finding a way around.
Here's the template in question:
{{#each votes}}
<h3>{{question}}</h3>
<ul>
{{#each participants}}
<li>
<p>{{email}}</p>
<select name="option-select">
{{#each ../options}}
<option value="{{option}}" class="{{is_selected_option}}">{{option}}</option>
{{/each}}
</select>
</li>
{{/each}}
</ul>
</div>
{{/each}}
And here's an example of a vote document:
{
_id: '32093ufsdj90j234',
question: 'What is the best food of all time?'
options: [
'Pizza',
'Tacos',
'Salad',
'Thai'
],
participants: [
{
id: '2f537a74-3ce0-47b3-80fc-97a4189b2c15'
vote: 0
},
{
id: '8bffafa7-8736-4c4b-968e-82900b82c266'
vote: 1
}
]
}
And here's the issue...
When the template drops into the #each for participants, it no longer has access to the vote context, and therefore doesn't have access to the available options for each vote.
I can somewhat get around this by using the ../options handlebars path to jump back into the parent context, but this doesn't affect the context of the template helper, so this in Template.vote.is_selected_option refers to the current participant, not to the current vote or option, and has no way of knowing which option we are currently iterating through.
Any suggestions on how to get around this, without resorting to DOM manipulation and jQuery shenanigans?
This is a templating issue that has come up multiple times for me. We need a formal way of reaching up the template context hierarchy, in templates, template helpers, and template events.
It seems since Spacebars (Meteor's new template engine), you have access to the parent context within {{#each}} blocks using ../.
In Meteor 0.9.1, you can also write a helper and use Template.parentData() in its implementation.
It's not particularly pretty, but I've done something like this:
<template name='forLoop'>
{{#each augmentedParticipants}}
{{> participant }}
{{/each}}
</template>
<template name='participant'>
...
Question: {{this.parent.question}}
...
</template>
// and in the js:
Template.forLoop.helpers({
augmentedParticipants: function() {
var self = this;
return _.map(self.participants,function(p) {
p.parent = self;
return p;
});
}
});
It's similar to the approach that AVGP suggested, but augments the data at the helper level instead of the db level, which I think is a little lighter-weight.
If you get fancy, you could try to write a Handlebars block helper eachWithParent that would abstract this functionality. Meteor's extensions to handlebars are documented here: https://github.com/meteor/meteor/wiki/Handlebars
I don't know the formal way (if there is one), but to solve your issue, I would link the participants with the parent ID like this:
{
_id: "1234",
question: "Whats up?",
...
participants: [
{
_id: "abcd",
parent_id: "1234",
vote: 0
}
]
}
and use this parent_id in helpers, events, etc. to jump back to the parent using findOne.
That is obviously a sub optimal thing to do, but it's the easiest way that comes to my mind as long as there is no way of referencing the parent context.
Maybe there is a way but it is very well hidden in the inner workings of Meteor without mention in the docs, if so: Please update this question if you find one.
It's a long shot, but maybe this could work:
{{#with ../}}
{{#each options}}
{{this}}
{{/each}}
{{/with}}
This should make life easier.
// use #eachWithParent instead of #each and the parent._id will be passed into the context as parent.
Handlebars.registerHelper('eachWithParent', function(context, options) {
var self = this;
var contextWithParent = _.map(context,function(p) {
p.parent = self._id;
return p;
});
var ret = "";
for(var i=0, j=contextWithParent.length; i<j; i++) {
ret = ret + options.fn( contextWithParent[i] );
}
return ret;
});
Go ahead and change
p.parent = self._id;
to whatever you want to access in the parent context.
Fixed it:
// https://github.com/meteor/handlebars.js/blob/master/lib/handlebars/base.js
// use #eachWithParent instead of #each and the parent._id will be passed into the context as parent.
Handlebars.registerHelper('eachWithParent', function(context, options) {
var self = this;
var contextWithParent = _.map(context,function(p) {
p.parent = self._id;
return p;
});
return Handlebars._default_helpers.each(contextWithParent, options);
});
This works :) with no error
Simply register a global template helper:
Template.registerHelper('parentData',
function () {
return Template.parentData(1);
}
);
and use it in your HTML templates as:
{{#each someRecords}}
{{parentData.someValue}}
{{/each}}
======= EDIT
For Meteor 1.2+, you shold use:
UI.registerHelper('parentData', function() {
return Template.parentData(1);
});
I was stuck in a similar way and found that the Template.parentData() approach suggested in other answers currently doesn't work within event handlers (see https://github.com/meteor/meteor/issues/5491). User Lirbank posted this simple workaround:
Pass the data from the outer context to an html element in the inner context, in the same template:
{{#each companies}}
{{#each employees}}
Do something
{{/each}}
{{/each}}
Now the company ID can be accessed from the event handler with something like
$(event.currentTarget).attr('companyId')
"click .selected":function(e){
var parent_id = $(e.currentTarget).parent().attr("uid");
return parent_id
},
<td id="" class="staff_docs" uid="{{_id}}">
{{#each all_req_doc}}
<div class="icheckbox selected "></div>
{{/each}}
</td>
{{#each parent}}
{{#each child}}
<input type="hidden" name="child_id" value="{{_id}}" />
<input type="hidden" name="parent_id" value="{{../_id}}" />
{{/each}}
{{/each}}
The _id is NOT the _did of the thing, it's the id of the parent!