Question

Look at the below code

        for story in book 
            if story.title.length < 140
                - var storyTitle = story.title;
            else
                - var storyTitle = story.title.substring(0, 140) + '...';

            .tiles
                a(href= 'http://' + story.link)
                    img(src=story.thumbnail, width='150', height='150')
                p Title: #{storyTitle}
                p Date: #{story.time}
                p Author: #{story.authorName}

This is working for me. However it perpllexes me that at tmes I can get away with using story.attribute and at places i must use #{story.attribute}.

For eg. if i use the line

p Title: storyTitle

without the moustaches, it simply prints the string “Title: storyTitle” in the browser.

another example, if I use img(src=#{story.thumbnail}, width='150', height='150'), it doesn’t works and i get a html string (%20%20… something…) in my browser.

so what gives?

Answer 1

Simply said

After equal sign (=) and inside code blocks no curly braces. Everywhere else use #{}.