Placing the template code underneath the existing code within the Handlebars layout.hbs file

Question

Placing the template code underneath the existing code within the Handlebars layout.hbs file

I'm currently working on a project using Express Handlebars. I have a template called foo.hbs that contains some JavaScript code which I need to insert below the script tags in the layout.hbs file:

<!DOCTYPE html>
<html>
  <head>
    <title>{{title}}</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    {{{body}}}
  <script type="text/javascript" src="../bower_components/jquery/dist/jquery.js"></script>
  <script type="text/javascript" src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
  <!-- INSERT custom code here -->
  </body>
</html>

If the content of foo.hbs was as follows:

<p>Hello World</p>
<!-- Want to insert this below script tags in layout.hbs -->
<script>
    // Some script that requires jQuery
</script>

Do you have any suggestions on how to achieve this?

Thanks.

javascript express tags handlebars.js region

Answer 1

Answer №1

Here is a guide on creating a helper function to add CSS/JS files:

To start, create a new file named helpers.js and include the code provided in this link.

Next, when setting up your handlebars instance, make sure to attach the helper like so:

exphbs.create({
   extname      :'hbs',
   defaultLayout: 'layout',
   helpers      : require('PATH-TO/helpers'),
});

In your layout.hbs file, insert {{{renderJS js}}} right before the closing </body> tag.
Lastly, don't forget to attach route-specific JS files to your view data by using the following code:
```
res.render('/foo', {
   'js': ['/path/to/1st-custom-js.js', 'path/to/2nd-custom-js.js']
 });
```

Answer 2

Here is a guide on creating a helper function to add CSS/JS files:

To start, create a new file named helpers.js and include the code provided in this link.

Next, when setting up your handlebars instance, make sure to attach the helper like so:

exphbs.create({
   extname      :'hbs',
   defaultLayout: 'layout',
   helpers      : require('PATH-TO/helpers'),
});

In your layout.hbs file, insert {{{renderJS js}}} right before the closing </body> tag.
Lastly, don't forget to attach route-specific JS files to your view data by using the following code:
```
res.render('/foo', {
   'js': ['/path/to/1st-custom-js.js', 'path/to/2nd-custom-js.js']
 });
```

Placing the template code underneath the existing code within the Handlebars layout.hbs file

Answer №1

Similar questions

The function has been halted midway through execution

Sending data when button is clicked from Google Apps Script to sidebar

Warning: Fastclick alerting about an ignored touchstart cancellation

Accordion featuring collapsible sections

Encountering a jQuery error while attempting to initiate an AJAX request

Setting a variable in Angular after a successful AJAX call

React has been reported to display a Minified React error even in its development mode

Is there a way to effectively organize an RSS feed using the .isoDate parameter while ensuring that the feed's elements remain interconnected (such as title and link)?

Utilizing Node.js to dynamically inject variables in SASS compilation

Unable to retrieve hours from MongoDB date array

AngularJS dynamically creates an HTML template that includes an `ng-click` attribute calling a function with an argument

I am encountering an issue trying to establish a connection with my socket server. Unfortunately, the server is not successfully connecting

Display current weather conditions with the Open Weather API (featuring weather icons)

My attempt to deploy the function on Firebase failed for the app located in the US central region

JavaScript: Receiving an error that function is undefined when working with data binding

Endlessly triggering document.execCommand, the JavaScript selectionchange-EventListener seems to have a mind of

Reloading the ASP.NET MVC bootstrap modal using Ajax for a fresh look

What is the process for showing a duplicate image in a dialog box once it has been selected on an HTML page?

Generating a React User-Object in JSON Format

Issue encountered when concealing page elements followed by revealing them again