个人中心
gpt4 book ai didi

javascript - 如何将oEmbed对象中的html直接写入jade模板中？

转载 作者：行者123 更新时间：2023-12-03 08:28:21 28 4
gpt4 key购买 nike

我有一个对象数组，每个对象都包含一个原始 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">&lt;div&gt;Everything you want 1&lt;script&gt;alert('hello1');&lt;/script&gt;&lt;/div&gt;</li>
    <li id="eg2">&lt;div&gt;Everything you want 2&lt;script&gt;alert('hello2');&lt;/script&gt;&lt;/div&gt;</li>
    <li id="eg3">&lt;div&gt;Everything you want 3&lt;script&gt;alert('hello3');&lt;/script&gt;&lt;/div&gt;</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/

28 4 0
文章推荐： javascript - $sce.trustAsHtml 在字符串上失败
文章推荐： javascript - 雅虎财经、Meteor 和 session
文章推荐： javascript - 如何在 Image() 构造函数中发送 cookie
文章推荐： javascript - jquery 将时间从英语转换为法语
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com