如何從oEmbed對象直接將html寫入Jade模板？

Question

我有一個對象數組，每個對象包含一個原始HTML值。 原始html是一個oEmbed對象，在單個字符串中包含javascript，css和html。

我想將每個原始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}

嘗試＃1源自此帖子。 嘗試時，在p!=行上出現Unexpected token ILLEGAL錯誤。

我以為我讀過一些東西，說html是玉器的內置過濾器 。 雖然找不到文檔中的任何地方。 嘗試＃2試圖實現它，但是我想我需要保存一個.html文件。 目前，html僅存儲在變量中。

當我將#{post.title}替換為#{post.html} ，嘗試＃3會在頁面上呈現某些內容，因此該錯誤不在each post in posts功能中的each post in posts 。

玉可以處理直接的html寫嗎？ 我會嘗試在函數中使用document.body.innerHTML更好，然后看看是否可以通過這種方式將其注入flex框中嗎？

任何幫助是極大的贊賞！

Answer 1

在閱讀了《 Jade Attributes》和《 Jade邏輯教程》中的一些文檔之后，希望這個答案對您有幫助：

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

閱讀我提供的文檔，它將幫助您理解。
each post ,index in posts使用index ， each post ,index in posts似乎很重要！
之后，我們定義一個變量來處理“ ID”，就像我們可以使用“ attributes ”定義將其設置為標簽。
最后，我們使用=設置內容以轉義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的內容， 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

如何從oEmbed對象直接將html寫入Jade模板？

問題描述

1 個解決方案

解決方案1
1 已采納 2015-10-31 02:13:14

如何從oEmbed對象直接將html寫入Jade模板？

問題描述

1 個解決方案

解決方案1 1 已采納 2015-10-31 02:13:14

解決方案1
1 已采納 2015-10-31 02:13:14