javascript function execution inside jade template

Question

I am new to nodejs and trying to create a jade file for the html content myfile.jade: Here are the contents of the file:

extends layout
block content
   script
     function capitalize(s) { 
       console.log("Testing js exec");
       return s.charAt(0).toUpperCase() + s.slice(1); 
     };
  table
    - each item in list
      tr
        td
          a(href="/collection/#{item.name}") #{capitalize(itemName)}

However, when running it throws the following error:

Error: mweb/views/collections.jade:8
    6|   script
    7|     function capitalize(s) { 
  > 8|       console.log("Testing js exec");
    9|       return s.charAt(0).toUpperCase() + s.slice(1); 
    10|     };

unexpected text ;

If I remove console.log, it throws the error saying:

TypeError: mweb/views/collections.jade:18
  > 18|             a(href="/collection/#{item.name}") #{capitalize(itemName)}

As far as I realized, capitalize is being called during the jade compilation and the function is not available as the script tag is also compiled into the html. What is the best way for me to have this call evaluated on a) server side or b) client side?

Thx

Andrey Sidorov · Accepted Answer · 2014-01-06 01:30:43Z

23

You need to define function in the scope of jade, not in JS you generate:

block content
   -  function capitalize(s) { return s.charAt(0).toUpperCase() + s.slice(1); };
  table
    - var list = ['one', 'two']
    - var itemName = 'test test'
    - each item in list
      tr
        td
          a(href="/collection") #{capitalize(itemName)}

but it's probably better to have it outside of template and pass reference to helpers object

answered Jan 6, 2014 at 1:30

Andrey Sidorov

25.6k5 gold badges65 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Kiran Over a year ago

thanks. that works. Do you mind giving any references on how to use the helpers?

Andrey Sidorov Over a year ago

There is no special helpers library. I'm referring to user-supplied functions as 'helpers'. When you render template, you pass your objects as input, and together with data you can pass reference to your helper / utility functions

laggingreflex Over a year ago

Is there a way to require it? like - var CircularJSON = require('circular-json')? (<this throws "undefined is not a function" error)

Andrey Sidorov Over a year ago

require it outside of template. Or you can actually pass reference to "require" to your template context and use it from inside jade code. There is no magic in require, it's just a normal javascript function

Andrey Sidorov Over a year ago

@BijayKushawaha no, you need to prepare all the data for your template fully in advance before you start rendering, I'm not aware of any "concurrent" rendering mode in jade/pug.

|

user1241388 · Accepted Answer · 2015-04-28 02:51:16Z

9

I realize this is really old, but when you declare a function in jade, you need to do

script.

not

script

the period makes the difference and will allow jade to pick up that it's in fact a piece of code, rather than HTML.

answered Apr 28, 2015 at 2:51

user1241388

1472 gold badges3 silver badges12 bronze badges

Comments

gregiolo · Accepted Answer · 2015-09-02 12:21:47Z

6

By this #{capitalize(itemName)} you are trying to call function that is passed to the template from the controller (back-end).

For instance (/routes/index.js):

res.render('index', { title: 'Express test', fs : { echo : lang} });

While in index.jade

 a(href='/register') #{fs.echo('xxx')}

where

lang

is a function defined earlier that takes some parameter.

answered Sep 2, 2015 at 12:21

gregiolo

1131 silver badge5 bronze badges

Collectives™ on Stack Overflow

javascript function execution inside jade template

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related