возникли проблемы при попытке визуализации HTML-содержимого внутри шаблона - PullRequest
Новая
       9

возникли проблемы при попытке визуализации HTML-содержимого внутри шаблона

0 голосов
/ 11 июня 2018

Имея следующий источник шаблона 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: "&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.curriculum в виде html, для этого я сначала освобождаю содержимое файла resume.curriculum <%= _.unscape(resume.curriculum) %>, но вместо получения html я получаю теги html и их содержимое в виде текста

В качестве справки, если в шаблоне я размещаю следующее содержимое <%= '<p><i>Some content</i></p>' %> соответствующим образом отображается как HTML

Я ценю любую помощь, чтобы решить этот сценарий

enter image description here

1 Ответ

0 голосов
/ 12 июня 2018

Где-то в коде на стороне сервера вы дважды экранировали поле 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>
...