javascript - 尝试在模板内呈现 html 内容时遇到问题

Question

具有以下 lodash 模板源

<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: "<p>some important information goes here</p>\r\n<p>unordered list</p>\r\n<ul>\r\n<li>item1</li>\r\n<li>item2</li>\r\n<li>item3</li>\r\n<li>item4</li>\r\n</ul>\r\n<p>ordered list</p>\r\n<ol>\r\n<li>pet1</li>\r\n<li>pet2</li>\r\n<li>pet3</li>\r\n<li>pet4</li>\r\n</ol>\r\n<p>Some <span style="text-decoration: line-through;"><span style="text-decoration: underline;"><strong>other</strong></span></span> <span style="text-decoration: underline;">information</span> <span style="text-decoration: line-through;">goes</span> <strong>here</strong></p>"
    }
}

以及以下实现

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.curriculum键的内容呈现为html，为了实现此目的，我首先对resume.curriculum内容进行转义<%= _.unscape(resume.curriculum) %> ，但我没有获取 html，而是获取 html 标签及其内容作为文本

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

感谢您为解决此情况提供的任何帮助

Answer 1

在服务器端代码中的某个位置，您对 curriculum 字段进行了双重转义。看到这个 block :

<p>some important information goes here</p>

应该是:

<p>some important information goes here</p>

所以，修复你的服务器端代码，你就会看到你的东西开始工作。要验证这一点，只需更改以下内容:

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

至:

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