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

Question

Having the following lodash template source

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

And having the following context

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

And the following implementation

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

I need to render the content of the resume.curriculum key as html, in order of accomplish this I first unescape the resume.curriculum content <%= _.unscape(resume.curriculum) %> , but instead of getting the html, I get the html tags and their content as text

As a help, if in template I place the following content <%= '<p><i>Some content</i></p>' %> is appropriately rendered as html

I appreciate any help to solve this scenario

Answer 1

Somewhere in your server-side code you have double-escaped your curriculum field. See this chunk:

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

That should be:

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

So, fix your server-side code and you'll see your stuff start working. To verify this, just change this:

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

to:

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