in Jade, why can i sometimes use variables as-is and on other times have to enclose them in #{…}?

问题

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?

回答1:

Simply said

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

回答2:

The difference is between the content and the attributes of tags. In the attributes, you can use the variables without braces, like

img(src=story.thumbnail

because you cant just put text in the value of attributes, it has to be a string:

img(src="/images/story.jpg")

You can't just do

img(src=/images/story.jpg)

But in the content of a tag, you have to use the hash+braces #{} so that Jade knows which bits are variables and which bits are just text.

If you want to use the hash+braces in tag attributes, you can do it like this:

img(src="#{story.thumbnail}")

来源：https://stackoverflow.com/questions/14709560/in-jade-why-can-i-sometimes-use-variables-as-is-and-on-other-times-have-to-encl

标签

express

pug