我有一个对象数组，每个对象都包含一个原始 HTML 值。原始 html 是 oEmbed对象，其中 javascript、css 和 html 位于单个字符串中。
我想将每个原始 html 字符串迭代到 css 弹性框中，但似乎不知道如何实现。
<! -- 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}
尝试 #1 源于 this post 。当我尝试这样做时，我在 p!= 行上收到 Unexpected token ILLEGAL 错误。
我以为我读过一些内容，上面说html是jade的内置过滤器。在 docs 中找不到它尽管。尝试#2 试图实现它，但我想我需要保存一个 .html 文件。目前 html 仅存储在变量中。
当我用 #{post.title} 替换 #{post.html} 时，尝试 #3 会在页面上呈现某些内容，因此错误不在 帖子中的每个帖子功能。
jade可以直接处理html写入吗？我最好尝试在函数中使用 document.body.innerHTML 并看看是否可以通过这种方式将其注入(inject)弹性框？
非常感谢任何帮助!
最佳答案
阅读 Jade Attributes 的一些文档后和 Jade logic tutorial ，我希望这个答案能帮助你:
Node.js
只需调用 node server.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);
文件: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
阅读我提供的文档，它将帮助您理解。
每个帖子中使用似乎很重要!index，帖子中的索引
之后，我们定义一个处理“ID”的变量，就像我们可以使用“属性”定义将其设置为标签一样。
最后，我们使用 = 设置内容来转义 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>请注意，如果您不想转义 post.html 的内容，请使用 !=
li(id= curId)!= post.html/*
^
instead of |
v
li(id= curId)= 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>因此将其转换为您的代码:
<! -- attempt 4 -->
div.container
h2 posts
ul.flex-container
each post, index in posts
li.flex-item= post.html
关于javascript - 如何将oEmbed对象中的html直接写入jade模板中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33444736/