How to ensure the javascript is at the bottom of the code in Jade template?

Question

I'm new to Jade template. Here is the layout.jade:

html
  head
    meta(charset='UTF-8')
    title MyApplication
    meta(content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no', name='viewport')
    link(href='/bootstrap/dist/css//bootstrap.min.css', rel='stylesheet', type='text/css')

  body
    block content

script(src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js')
script(src='/bootstrap/dist/js/bootstrap.min.js', type='text/javascript')

As you see, there are two javascript at the end of the template file. My another jade file, home.jade is:

extends layout

block content

        // Content Header (Page header)
        section.content-header
          h1= title

        // Main content
        section.content

script(type='text/javascript').
  $(function() {
     alert('here!');
  }

The javascript related to this file is at the end of the file. Unfortunately the block content is embedded inside the layout.jade so that the script here is loaded before the jQuery. The code will never be called. Is there any way to solve this problem to make sure the javascript here is loaded after the jQuery? Thanks

Answer 1

You can define more blocks in your layout to fill. You can even define default values for blocks: see http://jade-lang.com/reference/extends/

layout.jade:

html
  head
    meta(charset='UTF-8')
    title MyApplication
    meta(content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no', name='viewport')
    link(href='/bootstrap/dist/css//bootstrap.min.css', rel='stylesheet', type='text/css')

  body
    block content

    script(src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js')
    script(src='/bootstrap/dist/js/bootstrap.min.js', type='text/javascript')

    block script

home.jade:

extends layout

block content

        // Content Header (Page header)
        section.content-header
          h1= title

        // Main content
        section.content

block script
    script(type='text/javascript').
      $(function() {
        alert('here!');
      }

This will render your content, js libraries and your script respectively.

In layout.jade, indent script tags inside body.