How to display clickable links using jade?

Question

How to display clickable links using jade?

I have following jade code:-

<jade>

     each item in reports
        ul
          div.lstheader #{item.user}
             each val in item.status
                  li   #{val}
<jade>

Report is nothing but Json object such as follows

status: [ 'test', 'test message','http://stackoverflow.com/questions/ask' ] }

I want to display if item.status as clickable link if it's a link But how i can do it run time?

node.js
express
jade

Answer 1

Well you can use vanilla JS in Jade, just by prefixing your code with a -.

So you could do something like :

 - if (val.hasIndexOf("http")) // This is NOT a very robust test, maybe try with RegExp
       li: a(href=val)= val
- else
       li= val

But in my opinion you should move away any logic from Jade. In a perfect world, I think Jade should be limited to display purposes.

You could do something like :

// In Node.js
var elements = [
{
    "label" : "test"
},
{
    "label" : "test message"
},
{
    "label" : "Go To SO",
    "href" : "http://stackoverflow.com/questions/ask"
}
];

// In Jade
 each val in item.status
    if (val.href)
        li: a(href=val.href)= val.label
    else
        li= val.label

Now, this is clearly not perfect as you still perform tests in Jade, but at least it's not a shady test that might not succeed depending on what kind of links you want to display, and the items you want to display all have the same structure. But again, this is not perfect. Maybe you could find a better solution.