Express rendering using HBS strips (consumes?) Handlebars client panel templates

Question

Using Express with Don Park HBS as a viewer with the intention of using the same template template for client and server code. However, I ran into some problem.

With 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> 

Here's what the browser does:

 <h1>Express</h1> <p>Welcome to Express</p> <div id="place"></div> <script id="firstTemplate" type="text/x-handlebars-template"> <ul> </ul> </script> 

The rendering process of Express View seems to have used a block of templates designed for use in a browser. As far as I can tell, the rendering view just takes the whole .hbs file as a tempate template for rendering without extracting the script block from the server view.

Any ideas / workarounds for this?

Answer 1

I use Handlebars in the same way and faced the same problem.

I worked on this while retaining 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 upload it via ajax after rendering the page. Thus, my client template will not be erroneously rendered by Express.

It would be nice if there was a way to add a tag to let Express know, to ignore blocks like this and leave them to the client side.

Answer 2

If the steering wheels are really Mustache compatible, then this should work:

First change your separator by placing it somewhere at the top of the template (before any template placeholders)

 {{=<% %>=}} 

So, now all you want to do with the server, you will do:

 <% foo %> 

And all you want to do on the client is this:

 {{ bar }} 

See the bottom of the Mustache manual for more information - http://mustache.github.com/mustache.5.html

Answer 3

For rudders, you can use backslashes to avoid double curly braces, for example:

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