Stack Overflow
Stack Overflow

Questions tagged [handlebars.js]

Handlebars is a templating library for JavaScript.

Handlebars is a template library that is, more or less, based on . Handlebars uses Mustache template syntax to render templates but it also adds these features compared to Mustache:

  • Handlebars templates are compiled
  • Handlebars adds #if, #unless, #with, and #each
  • Handlebars supports custom helpers
  • Handlebars supports paths
  • Allows use of {{this}} in blocks (which outputs the current item's string value)
  • Handlebars.SafeString() (and maybe some other methods)
  • Handlebars is 2 to 7 times faster

However Mustache supports inverted sections (i.e. if !x ...) that are not used in Handlebars

Handlebars is used in as a Templating engine, Ember.js add some additionnal builtin helpers to the vanilla Handlebars.js. can also use handlebars when installed with the hbs option : --hbs

Resources :

7662 questions
551
votes
29 answers

Logical operator in a handlebars.js {{#if}} conditional

Is there a way in handlebars JS to incorporate logical operators into the standard handlebars.js conditional operator? Something like this: {{#if section1 || section2}} .. content {{/if}} I know I could write my own helper, but first I'd like to…
Mike Robinson
  • 24,971
  • 8
  • 61
  • 83
385
votes
9 answers

What are the differences between Mustache.js and Handlebars.js?

Major differences I've seen are: Handlebars adds #if, #unless, #with, and #each Handlebars adds helpers Handlebars templates are compiled (Mustache can be too) Handlebars supports paths Allows use of {{this}} in blocks (which outputs the current…
Chad Johnson
  • 21,215
  • 34
  • 109
  • 207
314
votes
9 answers

How do I access an access array item by index in handlebars?

I am trying to specify the index of an item in an array within a handlebars template: { people: [ {"name":"Yehuda Katz"}, {"name":"Luke"}, {"name":"Naomi"} ] } using this:
    {{people[1].name}}
If…
lukemh
  • 5,043
  • 7
  • 30
  • 38
299
votes
9 answers

How to get index in Handlebars each helper?

I'm using Handlebars for templating in my project. Is there a way to get the index of the current iteration of an "each" helper in Handlebars? {{#each item}} …
thunderboltz
  • 3,387
  • 3
  • 21
  • 20
290
votes
8 answers

Handlebars.js Else If

I'm using Handlebars.js for client side view rendering. If Else works great but I've encountered a 3 way conditional that requires ELSE IF: This doesn't work: {{#if FriendStatus.IsFriend }}
reach4thelasers
  • 26,181
  • 22
  • 92
  • 123
236
votes
5 answers

Access properties of the parent with a Handlebars 'each' loop

Consider the following simplified data: var viewData = { itemSize: 20, items: [ 'Zimbabwe', 'dog', 'falafel' ] }; And a Handlebars template: {{#each items}}
Drew Noakes
  • 300,895
  • 165
  • 679
  • 742
234
votes
8 answers

Is there a built-in way to loop through the properties of an object?

Is there a Mustache / Handlebars way of looping through an object properties? So with var o = { bob : 'For sure', roger: 'Unknown', donkey: 'What an ass' } Can I then do something in the template engine that would be equivalent to for(var…
Ben
  • 20,737
  • 12
  • 71
  • 115
225
votes
4 answers

Access a variable outside the scope of a Handlebars.js each loop

I have a handlebars.js template, just like this: {{externalValue}} And this is the generated…
lucke84
  • 4,516
  • 3
  • 37
  • 58
218
votes
6 answers

How to implement not with if statement in Ember Handlebars?

I have a statement like this: {{#if IsValid}} I want to know how I can use a negative if statement that would look like that: {{#if not IsValid}}
Kapil Garg
  • 3,100
  • 5
  • 19
  • 19
211
votes
3 answers

Insert html in a handlebar template without escaping

Is there a way to insert a string with html tags into a handlebars template without getting the tags escaped in the outcoming string? template.js:

{{content}}

use the template HBS.template({content: "test 123"}) actual outcome:…
Andreas Köberle
  • 106,652
  • 57
  • 273
  • 297
152
votes
8 answers

Passing variables through handlebars partial

I'm currently dealing with handlebars.js in an express.js application. To keep things modular, I split all my templates in partials. My problem: I couldn't find a way to pass variables through an partial invocation. Let's say I have a partial which…
Pascal Precht
  • 8,803
  • 7
  • 41
  • 53
149
votes
6 answers

How to use comments in Handlebar templates?

I am using Handlebar.js as my templating engine. Now I want to comment out some of the blocks in my handlebar templates. But then I realized that Handlebar doesn't ignore the expressions inside the Handlebar comment block. Any workaround for this?
Abhidev
  • 7,063
  • 6
  • 21
  • 26
143
votes
3 answers

Views vs Components in Ember.js

I am learning ember.js, and I am trying to understand the difference between a view and a component. I see both as a way of making reusable components. From Ember's website on views: Views in Ember.js are typically only created for the following…
Bradley Trager
  • 3,570
  • 3
  • 26
  • 33
140
votes
5 answers

handlerbars.js check if list is empty

Is there a way in Handlebars.js templating to check if the collection or list is null or empty, before going and iterating through the list/collection? // if list is empty do some rendering ... otherwise do the normal {{#list…
Drejc
  • 14,196
  • 16
  • 71
  • 106
138
votes
6 answers

How to iterate over array of objects in Handlebars?

This might seem a silly question but I can't seem to find the answer anywhere. I'm hitting this Web API that returns an array of objects in JSON format: Handlebars docs shows the following example:
    {{#each people}} …
empz
  • 11,509
  • 16
  • 65
  • 106
1
2 3
…
99 100