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!!!

edited Nov 13 '18 at 21:34

asked Nov 13 '18 at 14:40

trashtatur

455

1

have you had a look at this? i think this may help you

– Marcel Wasilewski
Nov 14 '18 at 11:45

this actually made it work, through some very minor changes to it. I will post an answer, detailling what I did. Thanks!!! You made this one guy here very happy :D

– trashtatur
Nov 15 '18 at 18:06

add a comment |

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!!!

edited Nov 13 '18 at 21:34

asked Nov 13 '18 at 14:40

trashtatur

455

1

have you had a look at this? i think this may help you

– Marcel Wasilewski
Nov 14 '18 at 11:45

this actually made it work, through some very minor changes to it. I will post an answer, detailling what I did. Thanks!!! You made this one guy here very happy :D

– trashtatur
Nov 15 '18 at 18:06

add a comment |

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!!!

edited Nov 13 '18 at 21:34

asked Nov 13 '18 at 14:40

trashtatur

455

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!!!

node.js handlebars.js partials express-handlebars

edited Nov 13 '18 at 21:34

asked Nov 13 '18 at 14:40

trashtatur

455

edited Nov 13 '18 at 21:34

asked Nov 13 '18 at 14:40

trashtatur

455

edited Nov 13 '18 at 21:34

asked Nov 13 '18 at 14:40

trashtatur

455

asked Nov 13 '18 at 14:40

trashtatur

455

asked Nov 13 '18 at 14:40

trashtatur

455

1

have you had a look at this? i think this may help you

– Marcel Wasilewski
Nov 14 '18 at 11:45

this actually made it work, through some very minor changes to it. I will post an answer, detailling what I did. Thanks!!! You made this one guy here very happy :D

– trashtatur
Nov 15 '18 at 18:06

add a comment |

1

have you had a look at this? i think this may help you

– Marcel Wasilewski
Nov 14 '18 at 11:45

this actually made it work, through some very minor changes to it. I will post an answer, detailling what I did. Thanks!!! You made this one guy here very happy :D

– trashtatur
Nov 15 '18 at 18:06

have you had a look at this? i think this may help you

– Marcel Wasilewski
Nov 14 '18 at 11:45

this actually made it work, through some very minor changes to it. I will post an answer, detailling what I did. Thanks!!! You made this one guy here very happy :D

– trashtatur
Nov 15 '18 at 18:06

add a comment |

1 Answer
1

active

oldest

votes

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] 

;
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!!!

edited Nov 19 '18 at 0:44

answered Nov 15 '18 at 18:18

trashtatur

455

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53283448%2fhandlebars-add-content-to-head-of-view-from-partial%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

UPDATE

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

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] 

;
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!!!

edited Nov 19 '18 at 0:44

answered Nov 15 '18 at 18:18

trashtatur

455

add a comment |

UPDATE

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

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] 

;
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!!!

edited Nov 19 '18 at 0:44

answered Nov 15 '18 at 18:18

trashtatur

455

add a comment |

UPDATE

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

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] 

;
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!!!

edited Nov 19 '18 at 0:44

answered Nov 15 '18 at 18:18

trashtatur

455

UPDATE

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

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] 

;
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!!!

edited Nov 19 '18 at 0:44

answered Nov 15 '18 at 18:18

trashtatur

455

edited Nov 19 '18 at 0:44

answered Nov 15 '18 at 18:18

trashtatur

455

answered Nov 15 '18 at 18:18

trashtatur

455

answered Nov 15 '18 at 18:18

trashtatur

455

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Myujth