node.js handlebars.js partials express-handlebars

handlebars - add content to head of view from partial

I am using express-handlebars in my project and have the following problem:

Question I want to be able to add <script> oder such tags to my overall views head from a partial that is called inside the view.

Example:

The view

{{#layout/master}}
{{#*inline "head-block"}}
<script src="some/source/of/script">
{{/inline}}
...
{{>myPartial}}
{{/layout/master}}

The view is extending another partial (layouts/master) that I use as a layout. It adds its content to that ones head block through the inline partial notation, which works fine

the Partial "myPartial

<script src="another/script/src/bla"></script>

<h1> HELLO </h1>

Now I would like that particular script tag in there to be added to my views head-block. I tried going via @root notation but can only reference context there. Not change anything.

I know I could use jquery or similar to just add the content by referencing the documents head and such. But I wanted to know if this is possible at all via Handlebars.

I do doubt it is in any way. But if you have any ideas or suggestions, please do send them my way! Many thanks!!!

Solution

UPDATE

This wont work if you have more than one thing injected into your layout / view. Since this happens when the browser loads the page, it creates some kind of raceconditions where the helpers has to collect the things that have to be injected into the parent file. If its not quick enough, the DOMTree will be built before the helper resolves. So all in all, this solution is NOT what I hoped for. I will research more and try to find a better one...

Here is how I did it. Thanks to Marcel Wasilewski who commented on the post and pointed me to the right thing!

I used the handlebars-extend-block helper. I did not install the package, as it is not compatible with express-handlebars directly (Disclaimer: There is one package that says it is, but it only threw errors for me) So I just used his helpers that he defines, copied them from the github (I am of course linking to his repo and crediting him!) like so:

var helpers = function() {

// ALL CREDIT FOR THIS CODE GOES TO: 
// https://www.npmjs.com/package/handlebars-extend-block
// https://github.com/defunctzombie/handlebars-extend-block

var blocks = Object.create(null);

return {

    extend: function (name,context) {
        var block = blocks[name];
        if (!block) {
            block = blocks[name] = [];
        }

        block.push(context.fn(this));
    },
    block: function (name) {
        var val = (blocks[name] || []).join('\n');

        // clear the block
        blocks[name] = [];
        return val;
    }
}
};
module.exports.helpers = helpers;

I then required them into my express handlebars instance like so:

let hbsInstance = exphbs.create({
        extname: 'hbs',
        helpers: require('../folder/toHelpers/helpersFile').helpers() ,
        partialsDir: partialDirs
    });

Went into my central layout/master file that`is extended by my view Partial and added this to its <head> section

{{{block 'layout-partial-hook'}}}

(The triple braces are required because the content is HTML. Else handlebars wont recognize that)

Then in the partial itself I added things like so:

{{#extend "layout-partial-hook"}}
    <link rel="stylesheet" href="/css/index.css"/>
{{/extend}}

And that did the trick! Thanks!!!