Node.js with Handlebars.js on server and client

javascript node.js handlebars.js express

40,419

Solution 1

Yup, it's a sticky problem --- kind of like the quoting problems in shell scripts which become a rats' nest of quoted quotes.

My solution is to use jade (a la haml) in expressjs (server-side) to output handlebars based templates for the client. This way, the server uses one syntax (jade), and the client uses another (handlebars). I am at the same crossroads as you, so I have the same challenge.

Of course, jade is not essential (though it's ready-made for expressjs). You could choose any (non-handlebars) template engine for the server, and/or you could use handlebars on the server with your non-handlebars templating on the client --- as long as the two syntaxes of your chosen templating engines do not collide. Since I'm using emberjs on the client and it uses handlebars syntax (by default), I prefer using emberjs + handlebars syntax on the client. So expressjs + jade became a natural fit for the server.

Solution 2

You should use pre-compiled client templates. They are faster executing and allow you to use the same template language on the server and client.

Install handlebars globally npm install handlebars -g
Precompile your templates handlebars client-template1.handlebars -f templates.js
Include templates.js <script src="templates.js"></script>
Execute the template var html = Handlebars.templates["client-template1"](context);

https://stackoverflow.com/a/13884587/8360

Solution 3

An easy way to do this is to just append a \ before the {{ in a Handlebars file. For example:

<script type="text/x-template" id="todo-item-template">
<div class="todo-view">
    <input type="checkbox" class="todo-checkbox" \{{checked}}>
    <span class="todo-content" tabindex="0">\{{text}}</span>
</div>

<div class="todo-edit">
    <input type="text" class="todo-input" value="\{{text}}">
</div>

<a href="#" class="todo-remove" title="Remove this task">
    <span class="todo-remove-icon"></span>
</a>

The above code will be rendered on the client with the {{..}} tags preserved.

Solution 4

Shameless self-promotion!

I wanted to do this same client/server sharing thing, so I wrote a little npm package to assist:

node-handlebars-precompiler

I whipped it up in a couple hours based on the command-line compiler in wycats' handlebars repo. It's not the greatest code in the world, but it's been getting the job done for me very well.

EDIT: I am no longer maintaining this package. If you would like to take over, please contact me via Github. I mainly use Jade templates now, so it doesn't make sense for me to continue as the maintainer.

Solution 5

I have worked around this by passing client-side templates through server-side templates.

So on the server-side read all your client-side templates to an array and pass it to your render function on the server-side

In your route handler do something like:

readTemplates(function(err, clientTemplates) {
  res.render("page", {
    clientTemplates: clientTemplates;   
  });
});

And then in layout.hbs:

{{#each clientTemplates}}
<script type="text/handlebars id="{{this.filename}}" >
{{{this.template}}}
</script>
{{/each}}

Here I'm using file names without extensions as the template id so that they can be referenced from Backbone views. Oh, and remember to implement caching for production mode.

Yeah, this sucks.

I think we should write a Handlebars/Express/Connect helper for this.

View more solutions

40,419

dzm

Updated on July 09, 2022

Comments

dzm almost 2 years
I have an app in Node.js using Expressjs and Handlebars as the template engine.

Expressjs uses layouts and then renders views. The layout (layout.hbs) looks like this:
```
<!doctype html>
<html lang="en">
    <head>
    </head>
  <body>
    {{{body}}}
  </body>
</html>
```
The {{{body}}} is replaced server-side, within node.js when you access a route. For example:
```
app.get('/', function(req, res){
   res.render('index'})
})
```
Will replace the {{{body}}} tag with the contents of index.hbs.

Now, on the client side I'm using Backbone.js and want to use Handlebars for the views controlled via Backbone. The problem is that because these pages are already rendered through Handlebars, when I attempt to use Handlebars within it (or Handlebars within Handlebars) it doesn't work. There are no errors, it simply just doesn't replace tags with data.

Has anyone encountered this before or have any idea a work around?

Thank you!
dzm about 12 years

Fair enough, sounds like I'll have to use a different template engine - thanks!
Marco Godínez over 11 years

Although using Jade seems to be the solution, I'm not convinced. If you find other solution I'll be pretty glad... for now I believe that using Jade and Angular.js it's my relief!
Chris Fong about 10 years

Really? Damn, I wish I'd known that a year ago. That's nice and simple.
skud over 9 years

That worked great, I wish they had put that in the documentation... or maybe I just missed it.
user752746 about 6 years

Thank you so much, I've been trying to figure this out all morning.