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}
Use !{item.body}
instead of #
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With