How to ensure the javascript is at the bottom of the code in express-handlebars template?

I've asked the same question for jade template. But I'd like to use handlebars now. The main reason is it's html like which is easier for me.

Here is my view folder structure:

views 
   |--- home.handlebars
   |--- layouts
          |---- main.handlebars

My layout is:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{title}}</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
    {{{body}}}

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

</body>
</html>

The jquery script is loaded at the end after my {{body}}.

Here is my home page template:

<p>This is my home page</p>

<script type="application/javascript">
    $(function() {
        alert( "ready!" );
    });
</script>

As you see, I'm trying to load the script at the very end. But unfortunately it's still before the jquery script so that my script is never called. My question is if there is a way like what I did in this question for jade template (to load my own script at last)? Thanks

Since handlebars does not support blocks that can be overridden and used at different times, I would take the approach of an asset manager.

You can place, in some array, in your application an list of scripts to be included. Then in your layout, you may loop through them all at the very bottom. The only caveat is you must specify it inside your application logic, which some people find messy.

app:

app.use(function (req, res, next) {
  res.locals.scripts = [];
  res.locals.scripts.push('/assets/js/common.js');
});

// ...

app.get('/your/route', function (req, res) {
  res.locals.scripts.push('/assets/css/something_specific.js');
  res.render('mykoolpage.hb', { some: 'variables here'  });
});

template:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{title}}</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
    {{{body}}}

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    {{#each scripts}}<script src="{{this}}"></script>
{{/each}}
</body>
</html>

Because you said you were fairly new to express, I just wanted to make one clarification: You do not need to pass res.locals to the template in res.render(), it gets added automatically. app.locals works that way too.

I can modify the main layout like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{title}}</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
    {{style}}
</head>
<body>
    {{> page/title}}
    {{> page/nav}}
    {{{body}}}

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    {{{script}}}
</body>
</html>

And then in my router:

var express = require('express');
var router = express.Router();

var script = '<script type="application/javascript">' +
    '$(function() {' +
        'alert( "ready!" );' +
    '});' +
'</script>';

router.get('/', function(req, res) {
  res.render('home', { title: 'My title',
                     script:script});
});

module.exports = router;

This works. But it's not elegant and troublesome because I can't make it through configuring of the template file itself.Any better methods?

I find a solution finally by using sections. Here is my app.js:

var exphbs = require('express-handlebars');

var app = express(),
    hbs = exphbs.create({

        defaultLayout:'main',
        helpers: {
            section: function(name, options){ 
                if(!this._sections) this._sections = {};
                this._sections[name] = options.fn(this); 
                return null;
            } 
        }    
    });

app.set('views', path.join(__dirname, 'views'));
app.engine('handlebars', hbs.engine);
app.set('view engine', 'handlebars');

My layout file main.handlebars:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{title}}</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
    {{{_sections.style}}}
</head>
<body>
    {{{body}}}

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    {{{_sections.script}}}
</body>
</html>

My template file home.handlebars:

<p>This is my home page</p>

{{#section 'script'}}

<script type="application/javascript">
    $(function() {
        alert( "I'm ready!" );
    });
</script>

{{/section}}

Everything is exactly the same as I did in my jade template. The only extra work is that I have to use the helpers function in my app.js file.