Question

Okay, I’m going to try to simplify this example as much as possible. Here’s my problem.
I’m using node and express with jade to generate html. I have a main layout.jade file which at the end of the body contains this:

block scripts
  script(src='/javascripts/libs/jquery-1.8.1.min.js')

Then I have a jade partial (_shapes.jade) which has the following code:

block append scripts
  script(src='/javascripts/wire.js')

Then I have my jade file (properties_panel.jade) which generates the html:

extends ../layout

include _shapes

block controls
  include ../_controls

The wire.js file needs jQuery to run.
The html output from jade is exactly as I would expect it to be. I have a block of script tags at the end of the body tag, and in the correct order (jQuery first).

The problem is that jQuery is not being loaded by the browser first. BUT, then it seems to also load the file again after jQuery has loaded. I have deduced this because my wire.js file is wrapped in a self-executing anonymous function like this:

!function (context, $) {
  console.log($);
}(this, window.jQuery);

And in my console I get 2 logs. the first one says ‘undefined’ and the second one logs jQuery correctly.

So here’s the weird part though. If I comment out the script line from my _shapes.jade, and instead add it to the layout.jade file after the jQuery import line, it generates the exact same html file, but everything loads in the correct order then.

Using the chrome developer tools, I can see the load order in the resources tab and even though the html does not change at all, the load order changes depending on the way the jade file generates the same identical html.

Am I doing something wrong? I’m relatively new to jade, so I may very well be.

Thanks!

Answer 1

You should use ‘extends layout’ in your shape:

extends layout

block append scripts
   script(src='/javascripts/wire.js')