如何呈现 JSON 响应中返回的 'escaped' HTML 块

Question

我是一名初级程序员，试图制作一个简单的 Meteor 应用程序，借此我可以通过其 REST API 显示来自我的另一个站点的数据（该站点在 Joomla 上运行，我正在使用 jBackend 作为REST API - 但这只是上下文，不适用于问题）

当我发送一个 GET 请求并收到一个响应时，返回的 JSON 给我的文章内容是一个巨大的 HTML 块 -

{
  "status": "ok",
  "id": "23",
  "title": "The Ivy",
  "alias": "the-ivy2",
  "featured": "0",
  "content": "<div class=\"venue-intro\">\r\n\t<h1>\r\n\t\t\t\t\t<a href=\"index.php?option=com_content&view=article&id=23:the-ivy2&catid=14:leisure-activites\" title=\"The Ivy\">\r\n\t\t\t\t\tThe Ivy\r\n\t\t\t\t\t</a>\r\n\t\t\t</h1>\r\n\r\n\t<div class=\"row\">\r\n\t\t<div class=\"col-md-5\">\r\n\t\t\t\t\t\t\t<div class=\"venue-intro-img\">\r\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"index.php?option=com_content&view=article&id=23:the-ivy2&catid=14:leisure-activites\" title=\"The Ivy\">\r\n\t\t\t\t\t\t\t\t\t\t\t<img src=\"http://localhost/stc/images/stories/com_form2content/p4/f20/thumbs/theIvy.jpg\">\r\n\t\t\t\t\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t<div class=\"col-md-7\">\r\n\t\t\t\t\t\t\t<p><p>The Ivy is situated in the heart of London's West End, close to Leicester Square, Shaftsbury Avenue and the vibrant quarters of Covent Garden and Soho. Open late each night, the restaurant is...</p>\r\n\t\t\t\t\t</div>\r\n\t</div>\r\n</div><div class=\"venue-main\">\r\n<h1>The Ivy</h1>\r\n\t<img src=\"http://localhost/stc/images/stories/com_form2content/p4/f20/theIvy.jpg\" class=\"venue-main-img\">\r\n\t<p><p>The Ivy is situated in the heart of London's West End, close to Leicester Square, Shaftsbury Avenue and the vibrant quarters of Covent Garden and Soho. Open late each night, the restaurant is also perfect for post theatre dinner. The Royal Opera House, Coliseum and all other theatres are a short walk away. The space can be arranged and dressed to suit your event- whatever the style and can accommodate 25-120 people.</p>\r\n<p>The room comes with a baby grand piano, fresh flowers, candles and place cards. AV equipment and musicians can be arranged and our event production company, Urban Caprice, can re-design and style the room for any event, supplying props, lighting and much more. We create seasonal menus especially for the Private Room, but let us know if you have any other favourite dishes and we'd love to try and include them.</p>\r\n<p><a href=\"http://www.the-ivy.co.uk/\" target=\"_blank\">http://www.the-ivy.co.uk/</a></p></p>\r\n</div>"
}

我正在尝试按照我的应用程序呈现此块，但我无法管理它 - 这是我迄今为止一直在尝试的 -

Template.articles.helpers({
  'content': function() {
    return $('<div />').html(this.content).text();
  }
});

使用这个方法得到这个输出 -

<div class="venue-intro"> <h1> <a href="index.php?option=com_content&amp;view=article&amp;id=23:the-ivy2&amp;catid=14:leisure-activites" title="The Ivy"> The Ivy </a> </h1> <div class="row"> <div class="col-md-5"> <div class="venue-intro-img"> <a href="index.php?option=com_content&amp;view=article&amp;id=23:the-ivy2&amp;catid=14:leisure-activites" title="The Ivy"> <img src="http://localhost/stc/images/stories/com_form2content/p4/f20/thumbs/theIvy.jpg"> </a> </div> </div> <div class="col-md-7"> <p></p><p>The Ivy is situated in the heart of London's West End, close to Leicester Square, Shaftsbury Avenue and the vibrant quarters of Covent Garden and Soho. Open late each night, the restaurant is...</p> </div> </div> </div><div class="venue-main"> <h1>The Ivy</h1> <img src="http://localhost/stc/images/stories/com_form2content/p4/f20/theIvy.jpg" class="venue-main-img"> <p></p><p>The Ivy is situated in the heart of London's West End, close to Leicester Square, Shaftsbury Avenue and the vibrant quarters of Covent Garden and Soho. Open late each night, the restaurant is also perfect for post theatre dinner. The Royal Opera House, Coliseum and all other theatres are a short walk away. The space can be arranged and dressed to suit your event- whatever the style and can accommodate 25-120 people.</p> <p>The room comes with a baby grand piano, fresh flowers, candles and place cards. AV equipment and musicians can be arranged and our event production company, Urban Caprice, can re-design and style the room for any event, supplying props, lighting and much more. We create seasonal menus especially for the Private Room, but let us know if you have any other favourite dishes and we'd love to try and include them.</p> <p><a href="http://www.the-ivy.co.uk/" target="_blank">http://www.the-ivy.co.uk/</a></p><p></p> </div>

这看起来完全有效 HTML 但问题是浏览器并没有这样呈现它 - 它只是按字面意义输出这个长字符串。 :(

最终，我希望能够呈现我在 JSON 响应中收到的 HTML。

感谢任何帮助。

Answer 1

Blaze 有一种使用三个大括号而不是正常的两个大括号来呈现 raw HTML strings 的方法。

有

{{{content}}}

在您的模板中应该呈现您的内容，前提是助手 returns 有效 HTML。

使用时非常小心，尤其是当它包含用户生成的内容时。

如何呈现 JSON 响应中返回的 'escaped' HTML 块

How to render block of 'escaped' HTML returned in JSON response

html

javascript

json

meteor

meteor-blaze