[英]How to write html from an oEmbed object directly into a jade template?
I have an array of objects that each contain a value of raw HTML. 我有一个对象数组,每个对象包含一个原始HTML值。 The raw html is an oEmbed object, with javascript, css, and html in a single string. 原始html是一个oEmbed对象,在单个字符串中包含javascript,css和html。
I would like to iterate each string of raw html into css flex boxes, but can't seem to figure out how. 我想将每个原始html字符串迭代到css flex框中,但似乎无法弄清楚如何做。
<! -- 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 . 尝试#1源自此帖子 。 I get an Unexpected token ILLEGAL
error on the p!=
line when I tried that. 尝试时,在p!=
行上出现Unexpected token ILLEGAL
错误。
I thought I had read something that had said html was a built in filter for jade. 我以为我读过一些东西,说html是玉器的内置过滤器 。 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. 尝试#2试图实现它,但是我想我需要保存一个.html文件。 Currently the html is only stored in a variable. 目前,html仅存储在变量中。
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. 当我将#{post.title}
替换为#{post.html}
,尝试#3会在页面上呈现某些内容,因此该错误不在each post in posts
功能中的each post in posts
。
Can jade handle a direct html write? 玉可以处理直接的html写吗? 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? 我会尝试在函数中使用document.body.innerHTML
更好,然后看看是否可以通过这种方式将其注入flex框中吗?
Any help is greatly appreciated! 任何帮助是极大的赞赏!
After reading some documentation from Jade Attributes and Jade logic tutorial , i hope this answer will help you : 在阅读了《 Jade Attributes》和《 Jade逻辑教程》中的一些文档之后,希望这个答案对您有帮助:
Node.js Node.js
Just call node server.js
to see the output. 只需调用node server.js
即可查看输出。
file : sever.js 文件: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 文件: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 ! each post ,index in posts
使用index
, each post ,index in posts
似乎很重要!
After that we define a variable handling the "ID", like that we can set it to the tag using the ' attributes ' definition. 之后,我们定义一个变量来处理“ ID”,就像我们可以使用“ attributes ”定义将其设置为标签。
And at last, we set the content using =
to escape the post.html
最后,我们使用=
设置内容以转义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 !=
请注意,如果您不想转义post.html
的内容, post.html
使用!=
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.