Handlebars template inside Handlebars

Question

Im trying to render a Handlebars template using NodeJS and Backbone.

So far, what i have done works perfectly when inside an HTML file:

app.MyView = Backbone.View.extend({
 ...    
 render: function() {           
   var template = Handlebars.compile( $("#my-template").html());        
   this.$el.html( template(this.model.toJSON()) );
   return this;
 }
 ...
});

View inside HTML:

<script type="text/x-handlebars-template" id="my-template">
   {{text}}
</script>

However, if I place this view inside a Handlebars template, it does not work because {{text}} is being interpreted by NodeJS Handlebars compiler.

Answer 1

Try:

<script type="text/x-handlebars-template" id="my-template">
   \{{text}}
</script>

Answer 2

I have fixed it by using a helper named "braces":

...
exports.braces = function(obj1){
   return '{{'+param+'}}';
}
...

And using:

<script type="text/x-handlebars-template" id="my-template">
   {{{braces 'text'}}}
</script>

Is there any way of doing this without using helpers?

Answer 3

You can define helpers in app.js like

app.engine( '.hbs', hbs({ extname: '.hbs', defaultLayout: 'base', ... helpers: { default: hbsHelper(), // this is the default helpers if you have like handlerbars-helpers raw() { return 'your templates' } } }) );

In your case, it is

raw() { return '<script type="text/x-handlebars-template" id="my-template"> {{text}} </script>' } replace ' with ` in your code.

Then in your front end files(.hbs for example), just include {{{raw}}}, and you can work with your templates without rendering. So that you can write normal templates without any other modifications, since {{{raw}}} will just render it as html.