Jade using Javascript variables

Question

I have the following example code

extends layout

block append content
 - var user = {name:'hello word'}
 include includes/header
 div.container
  p
   #{user.name}
  #blogs
    - each blog in blogs
      div.blog
         strong
          div.title
             a(href="/blog/"+blog._id)!= blog.title
         small
          div.created_at= blog.created_at
         div.body= blog.body.substring(0,100) + ' ... '
           a(href="/blog/"+blog._id)!= 'Read More'
  include includes/footer

This renders HTML output that contains

<p>
  <hello world><hello>
</p>

Can anyone explain what is going on here according to the Jade tutorial this should render correctly ...

Answer 1

If you were expecting hello world as text:

<p>
    hello world
</p>

Then, Jade needs just a bit more instruction since the default meaning of a line-break and indent is a child element.

Options include:

• Keeping the element and text on the same line (" Inline in a Tag "):

   p #{user.name} 

  Also, if that's the only text within the <p> :

   p= user.name 

• Using a | to specify the line as text (" Piped Text "):

   p | #{user.name} 

• Trailing the element with a . so all content under it is text (" Block in a Tag "):

   p. #{user.name}