Relatively new to handlebars.js, but not templating. I am using two loops to output markup in specific order. Both collections.intro and collections.elements are created by https://github.com/segmentio/metalsmith-collections.
Javascript
var order = ['intro', 'elements'];
collections.intro = [
{ title: 'One' },
{ title: 'Two' }
];
collections.elements = [
{ title: 'One' },
{ title: 'Two' }
];
Handlebars
{{#each order}}
{{this}} /* intro, elements */
{{#each ../collections.[this]}}
{{this.title}}
{{/each}}
{{/each}}
Is there anyway to use this from the order loop to access the correct collections. Both collections[intro] and collections[elements] work when hard coded.
Managed to resolve this with a custom helper:
Javascript
Handlebars.registerHelper( 'collection', function ( slug, options ) {
return options.data.root.collections[slug];
});
Handlebars
{{#each order}}
{{#each (collection this)}}
{{this.title}}
{{/each}}
{{/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}}
In a Meteor project, I have a collection of documents which can have one of two formats. To simplify, a given document may either have a type property or a label property. I would like to display this is a multiple select element, using whichever property they have to identify them.
Here's a working example:
HTML
<body>
{{> test}}
</body>
<template name="test">
<select name="elements" size="2">
{{#each elements}}
<option value="{{id}}">{{id}}: {{type}}{{label}}</option>
{{/each}}
</select>
</template>
JavaScript
Template.test.helpers({
elements: function () {
return [
{ id: 1, type: "type" }
, { id: 2, label: "label" }
]
}
})
This happily displays:
1: type
2: label
However, this is a simplification. The actual data that I want to display is more complex than this. I would rather not put all the concatenation logic into the HTML template. I would much rather call a JavaScript function, passing it the current document, and get the string to display. Something like:
<option value="{{id}}">{{functionToCall_on_this}}</option>
How could I do this with Meteor?
Answering my own question, I have found that I can change my template to include this line...
<option value="{{id}}">{{id}}: {{string}}</option>
And my helpers entry to use the map method:
Template.test.helpers({
elements: function () {
data = [
{ id: 1, type: "type" }
, { id: 2, label: "label" }
]
return data.map(function (item, index, array) {
var string = item.type || item.label
return { id: item.id, string: string }
})
}
})
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 want to fetch the last item of my JSON file. So I took a look at Getting the last element from a JSON array in a Handlebars template and tried to implement it. So far it gives me the number of the last entry but I need the options as well but dont know how to do it?
This is from the example mentioned
Handlebars.registerHelper("last", function(array, options) {
return array[array.length-1];
});
I tried to do:
Handlebars.registerHelper("last", function(array, options) {
if (array[array.length-1]) return options.fn(this);
return options.inverse(this);
});
My JSON files structure is:
releases: [{
"title" : "some title",
"releaseDate" : "2014-08-04"
},
"services": [{
"name" : "spotify",
"link" : "some link"
},
{
"name" : "itunes",
"link" : "some link"
}]
]
so my Handlebars template looks like:
{{#each releases}}
{{#last releaseDate}}
{{#each services}}
{{#equal name "Spotify" }}
{{/equal}}
{{#equal name "Itunes" }}
{{/equal}}
{{/each}}
{{/last}}
{{/each}}
But its not working, it displays an empty DIV
please help?
Handlebars already has #first and #last pseudo-variables. See docs on iterations and built-in helpers.
Example use case:
textArray = ["First", "N-1", "Last"]
<span>{{#each textArray}}{{#if #last}}{{this}}{{/if}}{{/each}}</span>
Result: <span>Last</span>
I would use an iterator helper for this.
Handlebars.registerHelper('layoutReleases', function (rows, options) {
var buffer = [], lastRow;
if (rows && rows.length > 0) {
lastRow = rows[rows.length-1];
buffer.push(options.fn(lastRow));
}
return buffer.join('');
});
Template:
{{#layoutReleases releases}}
{{releaseDate}}
{{#each services}}
{{#equal name "Spotify" }}
{{/equal}}
{{#equal name "Itunes" }}
{{/equal}}
{{/each}}
{{/each}}
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.