CODEWITHSUNDEEP
templatesnode.jsescapingpugcurly-braces
Juergen Gutsch
Juergen Gutsch

Reputation: 1764

How can I escape curly braces inside jade templates?

ho can I escape curly braces inside a jade teplate? (I use jade inside node.js)

I want to render jQuery templates to the client. The part I want to escape looks like this:

div(class='clear')
script(id='BoardListTemplate', type='text/x-jQuery-tmpl')
  <p>${Title}</p>
  <ul id="${Id}" class="IterationBoardList">
    <li class="AddNewItem">Add new Item</li>
    {{tmpl(Items) "#BoardListItemTemplate"}}
  </ul>
script(id='BoardListItemTemplate', type='text/x-jQuery-tmpl')
  <li class="Item" id="${{$data.Id}}">
    ${$data.Description}<br />
    Assigned to: ${$data.AssignedTo}<br/>
  StoryPoints: ${$data.StoryPoints}</li>
script(src='/javascripts/Scrummr.Engine.js', id='BoardListItemTemplate', type='text/javascript')

many thanks

Upvotes: 10

Views: 10598

Answers (3)

John O&#39;Connor
John O&#39;Connor

Reputation: 5274

Jade provides a dot (.) operator at the end of the line that allows you to escape everything inside the child indent block. 

script(id='BoardListTemplate', type='text/x-jQuery-tmpl').
  // Everything inside here is completely escaped.
  <p>${Title}</p>
  <ul id="${Id}" class="IterationBoardList">
    <li class="AddNewItem">Add new Item</li>
    {{tmpl(Items) "#BoardListItemTemplate"}}
  </ul>

- // outside here it's all JADE.
h1 How about a JADE heading

script(id='BoardListItemTemplate', type='text/x-jQuery-tmpl').
  // back to escaped script in here.
  <li class="Item" id="${{$data.Id}}">
    ${$data.Description}<br />
    Assigned to: ${$data.AssignedTo}<br/>
  StoryPoints: ${$data.StoryPoints}</li>

script(src='/javascripts/Scrummr.Engine.js', id='BoardListItemTemplate', type='text/javascript').

The DOT (.) at the end is the important part.

Upvotes: 0

metamatt
metamatt

Reputation: 14449

There are two different things going on here.

Jade uses whitespace to imply document structure; indentation matters and line breaks matter, and Jade expects each line to start with something that it will create HTML tags from.

If you want to feed it something that you don't want it to convert -- for example, raw HTML or script or a raw template you want to render on the client -- you can either

1) start each line with a pipe character ( | ), followed by raw text. Example from Jade docs:

p
  | foo bar baz
  | rawr rawr
  | super cool
  | go jade go

2) start a raw text block by ending the previous container tag with a period. Example, again from Jade docs:

p.
  foo asdf
  asdf
   asdfasdfaf
   asdf
  asd.

Separately, Jade performs string interpolation, treating some characters or characters specially, which you may need to escape in contexts where you don't want it to interpolate. This is the part this question asked about (escaping curly braces). Jade doesn't actually treat { specially, but it does treat #{ specially. If you need #{, you can escape it as \#{.

Upvotes: 3

Golo Roden
Golo Roden

Reputation: 134

You have to use the pipe ( | ) sign in front of each line inside the script block.

See https://gist.github.com/2047079 for an example.

Upvotes: 11

Related Questions