Handlebars.js: Can Handlebars do client side templating?

Created on 19 Apr 2012 · 10Comments · Source: handlebars-lang/handlebars.js

thanks for creating handlebar. While reading your page I know how to use handlebar, but I was looking for an client side template engine, could handlebars handle it? I saw from http://handlebarsjs.com/precompilation.html there is a , what if i didn't precompile the template , could I still use that js, or there is another js i need to include to make handlebars works in a client side only mannar ? It would be great if there is a page in http://handlebarsjs.com giving out simple html structure to setup the use of handlerbars in the client side.

Thanks.

Source

DaFrik

Most helpful comment

Hello!

Strange, but I didn't find the solution on the first page of googling result.

But there is enough information on handlebars site:

http://handlebarsjs.com/#getting-started
http://handlebarsjs.com/block_helpers.html#raw-blocks

The second link would be very useful, if you want to put one HBS template (for client-side compiling) to another (server side). Sample - below

And here working solution:

<body> ....
    <!-- I will add results of templating to this section -->
    <section class="hbs-container"></section>

    <script src="/js/jquery.min.js"></script> <!-- jquery - optional, it will help us to change DOM dynamically -->

    <!-- Required for templating -->
    <script src="/js/handlebars.min.js" type="text/javascript"></script>

<!-- actual client side template -->
<script id="template-hbs" type="text/x-handlebars-template">
    <article class="entry">
        <h1>{{title}}</h1>
        <div class="body">
            {{body}}
        </div>
    </article>
</script>

<!-- RUN CLIENT SIDE TEMPLATING -->
<script type="text/javascript">
    // get the template
    var source   = $("#template-hbs").html();

    // compile template:
    var template = Handlebars.compile(source);

    // apply template:
    var html = template({
        title: 'Info',
        body: "CLient side templating with HBS",
    });

    // add result to the page:
    $('.hbs-container').append(html);
</script>

</body>

'Client' template inside 'server' template:

wrap client-side template with {{{{raw-helper}}}}:

{{{{raw-helper}}}}
<script id="template-hbs" type="text/x-handlebars-template">
   <article class="entry">
       <h1>{{title}}</h1>
       <div class="body">
           {{body}}
       </div>
   </article>
</script>
{{{{/raw-helper}}}}

// Here is solution for hbs+express, but it works for any handlebars engine:
var hbs  = require('hbs');

hbs.registerHelper('raw-helper', function(options) {
 return options.fn();
});

PROFIT

maxkoryukov on 29 Mar 2016

👍4

All 10 comments

Precompilation is strictly optional, it just makes thing run a bit faster.

wagenet on 19 Apr 2012

thanks for your ans. I got one more question, can handlebars support dynamic loading of template, like I will inject the template to the page dynamically and then can i trigger the template after that? indeed, I was using icanhazjs before and the can support my use, however, the logic and path support in handlebars look attractive to me.

DaFrik on 19 Apr 2012

Yes, you can. In the callback or event handler that is triggered by the dynamic loader you can use Handlebars.compile(source) to create a template from the provided 'source' string. This could either be a string you received from the remote source, the innerHTML of a DOM element, or a string that you build yourself.

carlyle on 21 Apr 2012

Here's a working example

Just pretend that someAsyncFunction is your XHR or what have you

carlyle on 21 Apr 2012

Hello!

Strange, but I didn't find the solution on the first page of googling result.

But there is enough information on handlebars site:

http://handlebarsjs.com/#getting-started
http://handlebarsjs.com/block_helpers.html#raw-blocks

The second link would be very useful, if you want to put one HBS template (for client-side compiling) to another (server side). Sample - below

And here working solution:

<body> ....
    <!-- I will add results of templating to this section -->
    <section class="hbs-container"></section>

    <script src="/js/jquery.min.js"></script> <!-- jquery - optional, it will help us to change DOM dynamically -->

    <!-- Required for templating -->
    <script src="/js/handlebars.min.js" type="text/javascript"></script>

<!-- actual client side template -->
<script id="template-hbs" type="text/x-handlebars-template">
    <article class="entry">
        <h1>{{title}}</h1>
        <div class="body">
            {{body}}
        </div>
    </article>
</script>

<!-- RUN CLIENT SIDE TEMPLATING -->
<script type="text/javascript">
    // get the template
    var source   = $("#template-hbs").html();

    // compile template:
    var template = Handlebars.compile(source);

    // apply template:
    var html = template({
        title: 'Info',
        body: "CLient side templating with HBS",
    });

    // add result to the page:
    $('.hbs-container').append(html);
</script>

</body>

'Client' template inside 'server' template:

wrap client-side template with {{{{raw-helper}}}}:

{{{{raw-helper}}}}
<script id="template-hbs" type="text/x-handlebars-template">
   <article class="entry">
       <h1>{{title}}</h1>
       <div class="body">
           {{body}}
       </div>
   </article>
</script>
{{{{/raw-helper}}}}

// Here is solution for hbs+express, but it works for any handlebars engine:
var hbs  = require('hbs');

hbs.registerHelper('raw-helper', function(options) {
 return options.fn();
});

PROFIT

maxkoryukov on 29 Mar 2016

👍4

Sorry, april 2012...

maxkoryukov on 29 Mar 2016

Hello!

Strange, but I didn't find the solution on the first page of googling result.

But there is enough information on handlebars site:

http://handlebarsjs.com/#getting-started

http://handlebarsjs.com/block_helpers.html#raw-blocks

The second link would be very useful, if you want to put one HBS template (for client-side compiling) to another (server side). Sample - below

And here working solution:
<body> ....
    
    <section class="hbs-container"></section>

    <script src="/js/jquery.min.js"></script> 

    
    <script src="/js/handlebars.min.js" type="text/javascript"></script>


<script id="template-hbs" type="text/x-handlebars-template">
    <article class="entry">
        <h1>{{title}}</h1>
        <div class="body">
            {{body}}
        </div>
    </article>
</script>


<script type="text/javascript">
    // get the template
    var source   = $("#template-hbs").html();

    // compile template:
    var template = Handlebars.compile(source);

    // apply template:
    var html = template({
        title: 'Info',
        body: "CLient side templating with HBS",
    });

    // add result to the page:
    $('.hbs-container').append(html);
</script>

</body>
'Client' template inside 'server' template:
wrap client-side template with {{{{raw-helper}}}}: {{{{raw-helper}}}} <script id="template-hbs" type="text/x-handlebars-template"> <article class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div> </article> </script> {{{{/raw-helper}}}}
Register server-side helper (proof):
// Here is solution for hbs+express, but it works for any handlebars engine:
var hbs  = require('hbs');

hbs.registerHelper('raw-helper', function(options) {
 return options.fn();
});
PROFIT

This really helped, thanks! Any idea how to use custom helpers in client side?

brikka-quotient on 17 Mar 2020

@brikka-quotient don't do that. Don't compile templates client-side. Do not wrap client-side templates inside server-side templates. Unless there is a good reason for it...

And do not use Handlebars to build your single-page-app in 2020. There are better frameworks that support this kind of combination from scratch.

nknapp on 17 Mar 2020

@nknapp I'm doing this client side for only one section which will be loaded from AJAX based on user input

brikka-quotient on 17 Mar 2020

What I mean is that frameworks like Vue, React, Angular or frameworks based on them like nuxt, next, vuepress and many others, support isomorphic rendering, which is probably what you want to do. If you are just building a new app, you are probably trying to build something that already exists in an easier way.

nknapp on 17 Mar 2020

Was this page helpful?

0 / 5 - 0 ratings