Passing variable from jade file to javascript file

Question

I am making a node express app. I am trying to pass a value from jade to a javascript file.

On the server side I am using:

res.render('index', { title: 'Title', test: 1 });

In my index.jade file I have the following:

script(type='text/javascript', src='http://code.jquery.com/jquery-1.9.1.js')
script(type='text/javascript', src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.js')
script(type='text/javascript', src='./javascripts/ui.js')
script(type='text/javascript', src='./javascripts/handle.js').
  var data = !{test}
block content
  h3= title

In my handle.js file I have

$(function() {

    console.log(data);
});

On the console I get a message saying data is not defined. How do I pass the value of test from the jade file to the javascript file? Currently test is just an interger, but eventually it will be an object which contains a lot of properties.

How do I properly pass the value from the jade file to the javascript file?

Answer 1

That will only work for literals. For objects you can do this:

var data = !{JSON.stringify(data)};

As for the showing undefined part, check if its getting properly set and it is the correct variable.

Make sure you are loading in correct order:

script(type='text/javascript')                                                   
  var data =!{JSON.stringify(test)};
script(src='./javascripts/handle.js)