Jade variable rendering inside tag specifications

Question

I have a Jade page like so:

table
    th Site Name
    th Deadline
    th Delete Transaction

    - if (transactions != null)
        each item in transactions
            tr
                td= item.item_name
                td
                    span(id='countdown' + item.timeout + ')= item.timeout
                td
                    span(style='cursor: pointer;', onclick='deleteTransaction("=item.uniqueId")')= "X"

            button(id='confirmButton', onclick='confirm();')Confirm

As you can see in both the span attribute I try to put a local variable in two different ways and it doesn't work. Concerning the first way, I receive a token ILLEGAL error, while the second simply writes in my JavaScript something like deleteTransaction("=item.uniqueId");. I know the answer is something really stupid, but again and again Jade doc (even if it has improved) doesn't help me.

Thanks

Answer 1

To quote the docs:

Suppose we have the user local { id: 12, name: 'tobi' } and we wish to create an anchor tag with href pointing to "/user/12" we could use regular javascript concatenation:

a(href='/user/' + user.id)= user.name

Ergo:

span(id='countdown' + item.timeout)= item.timeout

// ...

span(style='cursor: pointer;', onclick='deleteTransaction("' + item.uniqueId + '")')= "X"

Quoting again:

or we could use jade's interpolation, which I added because everyone using Ruby or CoffeeScript seems to think this is legal js..:

a(href='/user/#{user.id}')= user.name

And so:

span(style='cursor: pointer;', onclick='deleteTransaction("#{item.uniqueId}")')= "X"

As a general tip that you'll use every day of your programming life: balance your quotes. Just like brackets and parentheses, every quotation mark must either open a new quotation or close an already-open quotation (of the same kind, i.e. double-quotes close double-quotes, single-quotes close single-quotes). To borrow your code:

span(id='countdown' + item.timeout + ')= item.timeout
  //                                 ^
  //                                 |
  // What's this guy doing? ---------+

Even though Jade is a templating language and perhaps not a "real" programming language this rule, just as in HTML (also not a programming language), will serve you well.