在模板中呈现html内容时出现问题怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (45)

具有以下提交模板源

<script id="resume-template" type="text/html">
    <tr>
        <td>Curriculum</td>
        <td>
            <%= _.unescape(resume.curriculum) %>
        </td>
    </tr>
</script>

并且具有以下上下文

const context = {
    resume: {
        email: '...',
        firstName: '...',
        lastName: '...',
        curriculum: "&amp;lt;p&amp;gt;some important information goes here&amp;lt;/p&amp;gt;\r\n&amp;lt;p&amp;gt;unordered list&amp;lt;/p&amp;gt;\r\n&amp;lt;ul&amp;gt;\r\n&amp;lt;li&amp;gt;item1&amp;lt;/li&amp;gt;\r\n&amp;lt;li&amp;gt;item2&amp;lt;/li&amp;gt;\r\n&amp;lt;li&amp;gt;item3&amp;lt;/li&amp;gt;\r\n&amp;lt;li&amp;gt;item4&amp;lt;/li&amp;gt;\r\n&amp;lt;/ul&amp;gt;\r\n&amp;lt;p&amp;gt;ordered list&amp;lt;/p&amp;gt;\r\n&amp;lt;ol&amp;gt;\r\n&amp;lt;li&amp;gt;pet1&amp;lt;/li&amp;gt;\r\n&amp;lt;li&amp;gt;pet2&amp;lt;/li&amp;gt;\r\n&amp;lt;li&amp;gt;pet3&amp;lt;/li&amp;gt;\r\n&amp;lt;li&amp;gt;pet4&amp;lt;/li&amp;gt;\r\n&amp;lt;/ol&amp;gt;\r\n&amp;lt;p&amp;gt;Some &amp;lt;span style=&amp;quot;text-decoration: line-through;&amp;quot;&amp;gt;&amp;lt;span style=&amp;quot;text-decoration: underline;&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;other&amp;lt;/strong&amp;gt;&amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt; &amp;lt;span style=&amp;quot;text-decoration: underline;&amp;quot;&amp;gt;information&amp;lt;/span&amp;gt; &amp;lt;span style=&amp;quot;text-decoration: line-through;&amp;quot;&amp;gt;goes&amp;lt;/span&amp;gt; &amp;lt;strong&amp;gt;here&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;"
    }
}

和下面的实现

const app = document.querySelector('#app');
const resume = response; // ajax response
const source = document.querySelector('#resume-template').innerHTML;
const template = _.template(source);

app.innerHTML = template(resume);

为了实现这一点,我需要将resume.code键的内容呈现为html。<%= _.unscape(resume.curriculum) %>,但我没有得到html,而是将html标记及其内容作为文本。

作为帮助,如果在模板中放置以下内容<%= '<p><i>Some content</i></p>' %>被适当地呈现为html。

我很感谢你能帮我解决这个问题。

提问于
用户回答回答于

在服务器端代码中的某个位置,你已经双转义了curriculum字段。看这个块:

&amp;lt;p&amp;gt;some important information goes here&amp;lt;/p&amp;gt;

这应该是:

&lt;p&gt;some important information goes here&lt;/p&gt;

因此,修复你的服务器端代码,你将看到你的东西开始工作。

<td>
  <%= _.unescape(resume.curriculum) %>
</td>

到:

<td>
  <%= _.unescape(_.unescape(resume.curriculum)) %>
</td>

扫码关注云+社区

领取腾讯云代金券