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 scrip开发者_如何转开发t block from server view.

Any ideas/workarounds for this?

---

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.

---

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

---

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>