How to do javascript math in a jade template?

Question

I want the lightness to be a function of order of item on the list

Here's the order variable

{{order}}

Here's the template language I'm trying to modify

.minicard(style="background-color:hsl(354,100%,{{(order * 2)+46}}%)")

What I'm basically trying to do is multiply order by 2 and add 46 to it.

{{order}} works but doing math within the curly brackets doesn't seem to. How do I do simple javascript in a jade template?

have you taken a look at https://stackoverflow.com/questions/20940860/javascript-function-execution-inside-jade-template? — Garfield, Sep 13 '17 at 05:19
jade is server side, javascript is client side. besides that, `{{ }}` is usually some client side framework notation, maybe AngularJs or Handlebars? — Claies, Sep 13 '17 at 05:20
have a look at https://stackoverflow.com/questions/10368040/arithmetic-operators-in-jade — Debabrata, Sep 13 '17 at 05:20
I think it should be `#{yourValue}`.As it is jade Interpolation are written like this.Nothing to do with metor — Debabrata, Sep 13 '17 at 05:22

adamccfc · Answer 1 · 2017-09-13T09:09:32.830

0

No need for JavaScript, you can do something like this:

- order = 10
- order = order * 2 + 45

.minicard(style="background-color:hsl(354,100%,"+order+"%;")

OR you can do it inline:

- order = 10

.minicard(style="background-color:hsl(354,100%," + (order * 2 + 45) + "%;")

Both should compile into:

<div class="minicard" style="background-color:hsl(354,100%,65%"></div>

edited Sep 13 '17 at 09:09

answered Sep 13 '17 at 09:03

adamccfc

I don't think math works for meteor jade (mquandalle/jade) – Tyler L Sep 14 '17 at 03:15

1 Answers1