Using util functions from external js

[Rajesh Elumalai]

Hi,

I'd like to include an external js file and use util functions from it. I use jade compile to generate an html doc, which then gets converted to pdf. What is the right way to achieve this? I have tried an include, and a script tag with src attribute. In both the options i get function undefined error.

Pls help.

- Rajesh

[Jason M]

If the JS you're trying to use needs to be external to the generated HTML then a 'script tag with src attribute' is the only way, but this is a limitation of HTML and Jade has nothing to do with it. Take the template out of the equation and get an HTML file to work correctly with the script and your PDF converter first, then change your Jade template so that it generates the HTML you need.

The 'include' feature is only for including other templates to be compiled in place. Though, depending on your needs, you could conceivably include another Jade template with your JS embedded, this would in turn embed the JS in the generated HTML.

[Rajesh]

Jason, thanks for the response. Here is the sample template I am trying.

script(type='text/javascript').
    function formatNumber() {
        return('100,000')
    }
p Amount is #{formatNumber(100000)}!


This throws an error "undefined is not a function". I have seen examples of using app.locals, but I cannot use it, since I am trying to compile in a module that doesn't have access to app instance.

[Jason M]

You're confusing contexts. The code in the script tag is not interpreted until the HTML file is viewed in the browser (or whatever consumes your HTML). Your call to formatNumber() needs to happen when the template is rendered, which logically must take place before the HTML is loaded by the client. 

You can write javascript directly in the template which will be evaluated during rendering, and then use it within the same template, but it's awkward. For instance:

- var formatNumber = function() { return('100,000') }

p Amount is #{formatNumber(100000)}!

It works, but it's cleaner to pass your helper method as a local when you render. Something like this:

var jade = require('jade');

function formatNumber() {
   return('100,000')
}

// Compile
var fn = jade.compile('p Amount is #{formatNumber(100000)}!');

// Render
var html = fn({formatNumber: formatNumber});

If you need to load and use external JS within the generated HTML (which is what I thought you were saying you needed to do) then you use a script tag. If you also need to use the JS for template rendering, then you must render the template there as well.

[Rajesh Elumalai]

Jason, thanks so much for your help. Using locals works well for my purpose! 

--
You received this message because you are subscribed to a topic in the Google Groups "Jade" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jadejs/bAkWusToP2o/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jadejs+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.