How do I ensure the javascript is at the bottom of the code in the Jade template?
I am new to Jade template. Here is 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 can see, there are two javascript at the end of the template file. My other jade home.jade file :
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 associated with this file is at the end of the file. Unfortunately the blocky content is embedded in layout.jade so the script is loaded before jQuery. The code will never be called. Is there a way to solve this problem to make sure the javascript is loaded after jQuery? Thanks to
+1
source to share
1 answer
You can define more blocks in the layout to fill. You can even define defaults 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 do your content, js libraries and your script accordingly.
In layout.jade, indent script tags inside the body.
+4
source to share