Accessing javascript variables inside partial in handlebars.js / express-handlebars

Question

First of all, sorry to ask a question that has been asked in similar ways before. I just can;t get any of the solutions to work for me.

I am using handlebars.js with the express-handlebars library in node.js. I have both server and client rendering set up correctly and can render partials with data passed in through routers with no problem.

However I am struggling to access the page context and render javascript data declared in a script in the page.

Page snippet:

 <script type="application/javascript">var hash = {
        var1:'this is the data I want to render', 
        var2: 'this is some more data i want to render'}</script>

            <div id="thisdiv">
                {{> blag this.hash}}
            </div>

Partial 'blag':

<div class="blag-partial">
    {{this.var1}}
    {{this.var1}}
</div>

I cannot get the value var1 in my hash variable to render. If i pass a hard coded string to the partial then it works with no problem, but I can never seem to access what i would call 'page context'.

What am I doing wrong that I can never seem to get this to work?

I have tried...

Passing 'this' as the context into the partial
Using the '../variablename' syntax to pass it into the partial
Send key value pairs into the partial
Accessing variable from context using the @ symbol in both the partial call and inside the partial itself

...and many other combinations of these things. With 100% failed attempts except when I pass in a hard-coded string.

Any help would be really appreciated. I feel like this should be simple.

apostrophedottilde · Accepted Answer · 2018-02-08 22:10:39Z

OK, so to resolve this problem I needed to change the JavaScript to actually grad a reference to the div i wanted the output in and inject then call the template with the data I wanted passed as an argument to the template

var hash1 = {
    var1:'this is the data I want to render',
    var2: 'this is some more data i want to render'};
document.querySelector('#thisdiv').innerHTML = blagTemplate(hash1);

And I changed my partial definition to :

<div class="blag-partial">
    {{#with this}}
        {{var1}}
        {{var2}}
    {{/with}}
</div>

My second mistake was that I thought I could inline this script inside a script tag in the page but it doesn't work at all.

I think my biggest mistake was in thinking that the 'express-handlebars' npm module was actually doing more for me than it actualy is doing. In reality...it automatically compiles my templates and partials in any of the directories I specify and that's about it.

So when I look at tutorials like like https://www.youtube.com/watch?v=4HuAnM6b2d8 for example, I still need to do the same process really...I can just skip the compilation process because thetemplates / partials were already compiled in my express node server.

Now I realize this it's ok, I just misunderstood what I should expect. If anybody has any knowledge to the contrary, please feel free to share.

I hope this can help at least 1 person, because it frustrated me for hours! :)

Collectives™ on Stack Overflow

Accessing javascript variables inside partial in handlebars.js / express-handlebars

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related