I have a list of Strings that I want to display with Handlebars.js
So far it seems that this is not possible, although it seems absurd that this should be the case.
An example of a product
object is:
"product": {
"name": "top TP-209-NAV",
"category": "Top",
"brand": "Living Dolls",
"description": "Fabric : Navy-white stretch cotton Long sleeves top (can be worn as dress)",
"price": "23.0",
"tags": [
"Slips on",
" stretch cotton",
" long sleeves"
],
"image1": {
"src": "http://www.livingdolls-closet.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/T/P/TP-209-NAV-1-living-dolls-top_1.jpg",
"ratio": 1.5
}
},
I want to iterate through and display the items in the tags
list.
When I do something like this I can see the appropriate number of commas which indicates that the list is being iterated through, however I can't work out how to display the actual tag item.
{{#product.tags}}<a href="">{{val}}</a>, {{/product.tags}}
You can iterate over a list using the built-in each helper. Inside the block, you can use this to reference the element being iterated over. You can use the this expression in any context to reference the current context. You can optionally provide an else section which will display only when the list is empty.
Handlebars. js is a Javascript library used to create reusable webpage templates. The templates are combination of HTML, text, and expressions. The expressions are included in the html document and surrounded by double curly braces.
Escaping Handlebars expressions Handlebars content may be escaped in one of two ways, inline escapes or raw block helpers. Inline escapes created by prefixing a mustache block with \ . Raw blocks are created using {{{{ mustache braces.
I just had to use the each
helper ..
{{#each product.tags}}<a href="">{{this}}</a>, {{/each}}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With