How to write html from an oEmbed object directly into a jade template?
Question
I have an array of objects that each contain a value of raw HTML. The raw html is an oEmbed object, with javascript, css, and html in a single string.
I would like to iterate each string of raw html into css flex boxes, but can't seem to figure out how.
<! -- attempt 1 -->
div.container
h2 posts
ul.flex-container
each post in posts
li.flex-item
p!= #{post.html}
<! -- attempt 2 -->
div.container
h2 posts
ul.flex-container
each post in posts
li.flex-item
include content.html #{post.html}
<! -- attempt 3 -->
div.container
h2 posts
ul.flex-container
each post in posts
li.flex-item #{post.html}
Attempt #1 stemmed from this post . I get an Unexpected token ILLEGAL error on the p!= line when I tried that.
I thought I had read something that had said html was a built in filter for jade. Couldn't find it anywhere in the docs though. Attempt #2 was trying to implement it, but I think I need to have a .html file saved down. Currently the html is only stored in a variable.
Attempt #3 renders something on the page when I substitute #{post.title} for #{post.html} , so the error is not in the each post in posts function.
Can jade handle a direct html write? Would I be better off trying to use document.body.innerHTML in a function and see if I can inject it to the flex boxes that way?
Any help is greatly appreciated!
1 answers
solution1
1 ACCPTED 2015-10-31 02:13:14
After reading some documentation from Jade Attributes and Jade logic tutorial , i hope this answer will help you :
Node.js
Just call node server.js to see the output.
file : sever.js
var jade = require('jade');
var data = [
{"extId":"eg1" , "html":"<div>Everything you want 1<script>alert('hello1');</script></div>"},
{"extId":"eg2" , "html":"<div>Everything you want 2<script>alert('hello2');</script></div>"},
{"extId":"eg3" , "html":"<div>Everything you want 3<script>alert('hello3');</script></div>"},
];
var html = jade.renderFile('testing.jade', {posts : data , pageTitle : 'TestingJade'});
console.log('html : ' , html);
file : testing.jade
doctype html
html(lang="en")
head
title= pageTitle
body
h1 Jade - node template engine
ul
each post ,index in posts
- var curId = post.extId
li(id= curId)= post.html
Read the docs i provide, it will help you to understand.
The use of index in each post ,index in posts seem to be important !
After that we define a variable handling the "ID", like that we can set it to the tag using the ' attributes ' definition.
And at last, we set the content using = to escape the post.html
<!DOCTYPE html> <html lang="en"> <head> <title>TestingJade</title> </head> <body> <h1>Jade - node template engine</h1> <ul> <li id="eg1"><div>Everything you want 1<script>alert('hello1');</script></div></li> <li id="eg2"><div>Everything you want 2<script>alert('hello2');</script></div></li> <li id="eg3"><div>Everything you want 3<script>alert('hello3');</script></div></li> </ul> </body> </html>
Note that if you don't want to escape the content of post.html use !=
li(id= curId)!= post.html/*
^
instead of |
v
li(id= curId)= post.html*/
the output should be :
<!DOCTYPE html> <html lang="en"> <head> <title>TestingJade</title> </head> <body> <h1>Jade - node template engine</h1> <ul> <li id="eg1"> <div>Everything you want 1 <script> alert('hello1'); </script> </div> </li> <li id="eg2"> <div>Everything you want 2 <script> alert('hello2'); </script> </div> </li> <li id="eg3"> <div>Everything you want 3 <script> alert('hello3'); </script> </div> </li> </ul> </body> </html>
So transposing it to your code :
<! -- attempt 4 -->
div.container
h2 posts
ul.flex-container
each post, index in posts
li.flex-item= post.html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.