Render an embedded partial template from a pre-compiled template using handlebars?

Question

I have a pre-compiled handlebars template that is rendering as expected.

I've decided to add an embedded (not pre-compiled) partial reference to the template that I'm pre-compiling but the content of the partial is not rendering properly.

The end result is that the contents of the embedded partial are included in the rendered HTML (I suppose my partial is "partially" working :-D ), but:

1. the name of the partial is also included on each line
2. the expression in the partial is not populated with my data

This is the HTML that is rendered. The 3 lines from the partial named templateBodyItemNumberPartial are listed below (the partial name seems to be prefixed to each line of output) and no data is rendered in the <span>:

<div class="templateBodyItem">
    templateBodyItemNumberPartial
templateBodyItemNumberPartial            <span class="templateBodyItemNumber"></span>
templateBodyItemNumberPartial         
    this is my body text
    <div class="templateBodyItemFooter">this is my footer text</div>
</div>

This is the main, pre-compiled template that references the templateBodyItemNumberPartial partial:

{{! templates/nameWithPartial.handlebars }}
{{! precompiled via: handlebars ./templates/nameWithPartial.handlebars -f external_template_with_partial.js }}
<div class="templateBodyItem">
    {{> templateBodyItemNumberPartial }} 
    {{ templateBodyItem }}
    <div class="templateBodyItemFooter">{{ templateBodyFooter }}</div>
</div>

This is the .html file where I define/register the partial and invoke my pre-compiled nameWithPartial template:

<script type="text/javascript" src="./handlebars-v2.0.0-alpha.4.js"></script>
<script type="text/javascript" src="./external_template_with_partial.js"></script>

<script id="templateBodyItemNumberPartial" type="text/x-handlebars-template">
    <span class="templateBodyItemNumber">{{ templateBodyItemNumber }}</span>
</script>

var templateBodyObject = {
    templateBodyItemNumber : 4 ,
    templateBodyItem : 'this is my body text' ,
    templateBodyFooter : 'this is my footer text'                                    
};

// verify that the partial html is what I think it should be
console.log( $( '#templateBodyItemNumberPartial' ).html() );
//=> <span class="templateBodyItemNumber">{{ templateBodyItemNumber }}</span>

Handlebars.registerPartial( 'templateBodyItemNumberPartial' , $( '#templateBodyItemNumberPartial' ).html() );
var templateHtml = Handlebars.templates.nameWithPartial( templateBodyObject );

I'm attempting to use an embedded partial just to test how partials work in handlebars.

Can anyone confirm if this functionality is supported OR do I have to use pre-compiled partials if my main template that references the partial is pre-compiled?

Many thanks!

BTW, I'm running Win7 Pro 64-bit but hopefully that's not the issue...

Answer 1

This issue seems to be solved by rolling back handlebars to @1.3.0.

I changed one line of code above from:

<script type="text/javascript" src="./handlebars-v2.0.0-alpha.4.js"></script>

to:

<script type="text/javascript" src="./handlebars-v1.3.0.js"></script>

Then I rolled back the handlebars CLI to @1.3.0:

$ npm install -g [email protected]

and re-compiled the external template:

$ handlebars ./templates/name_with_partial.handlebars -f external_template_with_partial.js

I'm guessing there is either an issue with partials and @v2.0.0-alpha.4 OR the partials functionality in this latest version has changed. I deserve what I get for using something with "alpha" in the name. :)

Oh well, thanks for listening.