CODEWITHSUNDEEP
javascripttemplate-enginepug
JonathanRevell
JonathanRevell

Reputation: 31

How to include Javascript objects in a Jade template before Jade compilation

I am working with a website built with Jade/Express for a few weeks now. I recently organized the image folder for the website so all the images were disbursed between several folders to make it easier to use and sort through.

To make it easier to make changes to the hierarchy of images (and other such files) I wrote a script that contains some globals for file paths. Now I have been trying to get the script to run so that I can call functions inside the jade template to automatically use these globals.

For example. Images are now sorted into several folders:

File Hierarchy

img/
    glyphs/
    interactivity/
        buttons/
    ...

In my path manager script, I created several functions, including the following:

In: path-manager.js

 images_root_path = "/img/";
 glyph_path = images_root_path + "glyphs/";
 function getGlyph(color, name) {
     return glyph_path + color + "/" + name;
 }

I tried several methods to get the script to execute before the template. Here is one of the attempts:

In page.jade

include ../../../public/js/lib/path-manager.js
=NamespacePathManager();

The above is, in theory, supposed to include the js and then I execute the namespace below to make the functions available, but that isn't working.

This is a portion of the Jade template that I want to use the function in:

In page.jade after the script include

span.challenge-time
   img(src=getGlyph("black","stopwatch.png"), style="margin-right:5px;")

The above example should return: "/img/glyphs/black/stopwatch.png"

The problem is, I believe, that the scripts I am trying to make available server-side to the jade template are not being executed before the jade template is rendered. Everything I have tried doing to get this to work always results in an error saying that the server doesn't recognize the function getGlyph or when I started using the namespace function, NamespacePathManager

Summary: I want a javascript file to execute before a jade template is rendered into a webpage so that I can call functions and variables from that javascript on the server to use while rendering the jade template. My problem is that all the methods I have tried are unable to execute the javascript before the Jade is rendered.

Update One work around I found was to put the javascript into unbuffered code directly on the page including a jade. This isn't quite the elegant solution I was looking for, but it works for now

- some code
- more code

This code is executed inline. The downside is that I have to include it on every page manually - instead of just including it once and having the functions available everywhere.

Upvotes: 2

Views: 3083

Answers (1)

250R
250R

Reputation: 37151

You can register helper methods in Express that will then be accessible in the views.

So in your case, the path-manager.js can be the helper file that you register, and contains:

var images_root_path = "/img/";
var glyph_path = images_root_path + "glyphs/";

exports.helpers = {
  getGlyph: function (color, name) {
    return glyph_path + color + "/" + name;
  }

  // Other helper methods here..
};

Then when setting up the express server, you register the helper

var app = express.createServer();

// app.configure here...
//   app.use ...

app.helpers(require('./path-manager.js').helpers);

// Routes set up here ..

Finally, you can call the helper method from Jade view like this:

span.challenge-time
  img(src='#{getGlyph("black","stopwatch.png")}', style='margin-right:5px;')

There's a good write up on this topic at DailyJS http://dailyjs.com/2011/01/03/node-tutorial-8/

Upvotes: 2

Related Questions