Reloading partials Handlebars

Question

I'm quite new to programming and especially to handlebars. I have a div loaded with combination of jquery and handlebars in my html file. I have tabs on top of it. I want to reload all the content to a new one when there is a click on a tab. The content is similar (same structure) but labels, images and so on have to change. I tryed to use the partial in handlebars.js. Here is a sample code.

<script type="text/x-handlebars-template" id="all-handlebar">
    {{#each tabs}}
        <div id=tab{{@index}}>{{this.text}}</div>
    {{/each}}
    <div id="tab-content">{{> tabContentPartial}}
</script>
<script type="text/x-handlebars-template" id="tab-content-partial"> 
    <div id="mycontent">
        <div id="text">{{mycontent.text}}</div>
        <div id="text">{{mycontent.image}}</div>
    </div>      
</script>
<script type="text/javascript">
    source=$("#all-handlebar").html();
    var template = Handlebars.compile(source);
    Handlebars.registerPartial("tabContentPartial", $("#tab-content-partial").html())
    var context = {
        mycontent : {
            text="something that has to change everytime I click on a different tab",
            image="idem"
    };
    var html = template(context);
    $("body").html(html);
</script>

It loads well the first time but when I click on the tab, I ask him to re-registerPartial the tab-content-partial script and it doesn't exist anymore because it has changed to HTML block right in my code. How can reuse and reload my partial script with new contents ?

Thank you very much !

Would be helpful if you provide some relevant code. Normally you pass your compile your handlebar template. Then you pass your data and it returns the create html which you then insert to your page. This compiled template you can reuse with different data. — t.niese, Jul 01 '13 at 14:49
Is it clearer now ? Sorry for the delay, I tried to look through different solutions. — Ambroise Collon, Jul 02 '13 at 15:03

t.niese · Accepted Answer · 2014-01-25T12:49:37.027

The tab switching part of your code is missing and also how you retrieve your data, so I can only tell you what you need to do at the place where you listen to your tab switching.

To achieve this you just need to also compile your #tab-content-partial for this you don't need to change much:

var source=$("#all-handlebar").html();
var contentSrc=$("#tab-content-partial").html();
var template = Handlebars.compile(source);
var contentTemplate = Handlebars.compile(contentSrc);

//because you already have a compiled version of your content template now you can pass this as partial
Handlebars.registerPartial("tabContentPartial", contentTemplate);
var context = {
    mycontent : {
        text : "something that has to change everytime I click on a different tab",
        image : "idem"
    }
 };

var html = template(context);
$("body").html(html);

Then at the time where you need to change the content you will just pass the data of the content to the content template and then replace the content of #tab-content with the new result. This way you could also create different content templates.

//replace the content with the result of the template
$("#tab-content").html( contentTemplate(newContent) );

I hope this is what you where looking for, if not feel free to ask.

can you please provide fiddle for this? – pravid Mar 23 '15 at 08:07 — pravid, Mar 23 '15 at 08:07

Reloading partials Handlebars

1 Answers1