Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to display a list of Strings with Handlebars.js

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}} 
like image 739
Ankur Avatar asked May 02 '13 17:05

Ankur


People also ask

How do you iterate in HBS?

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.

Can you use Handlebars in JavaScript?

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.

How do you escape curly braces with Handlebars?

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.


1 Answers

I just had to use the each helper ..

{{#each product.tags}}<a href="">{{this}}</a>, {{/each}}
like image 67
Ankur Avatar answered Nov 15 '22 20:11

Ankur