CODEWITHSUNDEEP
javascriptnode.jspug
avrono
avrono

Reputation: 1680

Jade using Javascript variables

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 ...

Upvotes: 0

Views: 5095

Answers (1)

Jonathan Lonowski
Jonathan Lonowski

Reputation: 123563

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}

Upvotes: 7

Related Questions