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

Depends on what you were expecting the output to be. What would you consider "correct" in this case? — Jonathan Lonowski
– Jonathan Lonowski, Commented Oct 21, 2013 at 13:02

Jonathan Lonowski · Accepted Answer · 2013-10-21 13:31:35Z

7

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}
```

edited Oct 21, 2013 at 13:31

answered Oct 21, 2013 at 13:09

Jonathan Lonowski

124k35 gold badges203 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jade using Javascript variables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related