Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Passing html elements into a jade file

Is it possible to pass HTML elements into a jade file e.g. I would like for the following to populate the p element with text, and a code element with some contained text nested inside the p element.

JSON containing strings

var news = {
  one : {
    title : "Using JSON",
     body : "Using JSON is a great way of passing information into the jade template files."+
            "It can be looped over using jades each syntax <code>test</code>"
  },
  two : {
    title : "",
    body : ""
  }
}

Routing the HTTP request

// Routes
app.get(navigation.home.uri, function(req, res){ //Home
  res.render(navigation.home.url, {
    title: navigation.home.title,
    navigation: navigation,
    news: news
  });
});

Jade file snippet, with a loop for each news item

  section#news
    - each item in news
      article(class="news")
        header
          h2 #{item.title}
        p #{item.body}
like image 224
Jack Avatar asked Dec 04 '22 07:12

Jack


2 Answers

Use !{item.body} instead of #

like image 187
smathy Avatar answered Dec 16 '22 15:12

smathy


The accepted answer is indeed correct for the example given by @Jack, however I used this without an initial p tag:

block content
    .jumbotron
        !{template.sections.welcome}
    .panel.panel-default
        !{template.sections.headline}

And this is not correct and will throw up some Jade warnings like

Warning: missing space before text for line 6 of jade file "~/demo/views/home.jade"

This is because instead of using Unescaped Buffered Code it is using interpolated and is intended for use with long strings.

So the correct syntax (as explained here) would be:

block content
    .jumbotron
        != template.sections.welcome
    .panel.panel-default
        != template.sections.headline

Hope this saves someone some time trying to get to the bottom of those warnings!

like image 22
jamlen Avatar answered Dec 16 '22 16:12

jamlen