尝试在模板中呈现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字段。看到这个块：

<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>