CODEWITHSUNDEEP
node.jsexpress
Sumod
Sumod

Reputation: 41

Express view render using HBS strips (consumes?) Handlebars client side templates

Using Express with Don Park's HBS as the view engine, with the intention of using the same templating style for both client and server code. However I have run into a bit of a snag.

With the index.hbs shown here,

<h1>{{title}}</h1>
<p>Welcome to {{title}}</p>

<div id="place"></div>

<script id="firstTemplate" type="text/x-handlebars-template">
  <ul>
    {{#lines}}
      <li>{{name}}</li>
    {{/lines}}
  </ul>
</script>

Heres what renders to the browser:

<h1>Express</h1>
<p>Welcome to Express</p>

<div id="place"></div>

<script id="firstTemplate" type="text/x-handlebars-template">
  <ul>

  </ul>
</script>

The Express View render process seems to have consumed the template block intended for use in the browser. As far as I can tell, the view renderer just takes the entire file.hbs as a string tempate to render, not distinguishing the script block from server view.

Any ideas/workarounds for this?

Upvotes: 4

Views: 1463

Answers (3)

Sajjan Sarkar
Sajjan Sarkar

Reputation: 4198

For handlebars, uou can use backslash to escape the double braces, like so:

<script id="firstTemplate" type="text/x-handlebars-template">
  <ul>
    \{{#lines}}
      <li>\{{name}}</li>
    \{{/lines}}
  </ul>
</script>

Upvotes: 0

Josh
Josh

Reputation: 603

If handlebars is truly compatible with Mustache, then this should work:

Change your delimiter first by putting this somewhere at the top of your template ( before any template placeholders )

{{=<% %>=}}

So now anything you want rendered by the server you will do:

<% foo %>

And anything you want rendered on the client like so:

{{ bar }}

More info is at the bottom of the Mustache manual here - http://mustache.github.com/mustache.5.html

Upvotes: 1

Nick Hagianis
Nick Hagianis

Reputation: 1468

I'm using Handlebars in the same way and ran into the same problem.

I worked around it by storing this part:

<script id="firstTemplate" type="text/x-handlebars-template">
  <ul>
    {{#lines}}
      <li>{{name}}</li>
    {{/lines}}
  </ul>
</script>

In a separate static file and then loading it via ajax after the page has rendered. This way my client-side template doesn't get mistakenly rendered by Express.

It would be nice though if there were a way to add a tag to let Express know to ignore blocks like that and leave them for the client-side.

Upvotes: 1

Related Questions