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

Merging two separate observableArray into a single entity in knockout js

Encountering a 500 Error and an Unexpected token < issue in the JSON at position 0 while deploying a MERN stack

Azure-Graph is reporting an error: 'Invalid or missing Access Token.'

Utilizing optional parameters with React Router

"Selecting an element through Drag/Drop will result in the element being

Issue encountered during the creation of a Nuxt3 project. The download of the template from the registry was

Unable to transmit Javascript array to PHP using Ajax

What could be the reason for the failure of this GET route in the jest test?

Vuetify's v-badge showcasing an exceptionally large number in style

Tips for loading a webpage based on the selected value of a JQuery dropdown list

Modifying the embed to shift colors over a specified duration in discord.js

Creating a React Native project without the use of TypeScript

implementing token authentication in an Express.js application using JWT and the jwt-express library

Consolidating various JavaScript events into one single event

Validate file input using express-validator - A step-by-step guide

Angular directive preventing default action but Chrome still loading image on drag

I am looking to transmit information from flask to React and dynamically generate HTML content based on it

Is there a way for me to retrieve the data returned from a worker thread?

How to customize the center text of Chart.js doughnut chart

Understanding the functionality of app.locals within app.get in an Express application and how to effectively parse data