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 :

7223 questions
508
votes
26 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,069
  • 8
  • 59
  • 83
351
votes
8 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…
291
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
  • 4,674
  • 7
  • 26
  • 36
280
votes
7 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,197
  • 3
  • 18
  • 20
256
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
  • 23,986
  • 21
  • 87
  • 119
218
votes
8 answers

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

As the title of question says, 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…
Ben
  • 19,033
  • 11
  • 65
  • 105
215
votes
3 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
  • 266,361
  • 143
  • 616
  • 705
200
votes
3 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,186
  • 3
  • 32
  • 55
189
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
  • 2,689
  • 4
  • 16
  • 19
165
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
  • 88,409
  • 51
  • 246
  • 277
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,550
  • 3
  • 24
  • 33
140
votes
4 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
  • 6,413
  • 5
  • 18
  • 25
138
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,393
  • 7
  • 36
  • 50
130
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
  • 13,466
  • 15
  • 65
  • 101
120
votes
10 answers

What's the use of Jade or Handlebars when writing AngularJs apps

I am new(ish) to the whole javascript full stack applications, and completely new to Angular, so I was hoping somebody can put the record straight for me here. Why would I need to use a templating framework like Jade or Handlebars when writing…
Jay Pete
  • 3,697
  • 4
  • 31
  • 46
1
2 3
99 100