【问题标题】:How to render block of 'escaped' HTML returned in JSON response如何呈现 JSON 响应中返回的“转义”HTML 块
【发布时间】:2016-09-26 22:22:00
【问题描述】:

我是一个初学者程序员,试图制作一个简单的 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。

感谢任何帮助。

【问题讨论】:

    标签: javascript html json meteor meteor-blaze


    【解决方案1】:

    Blaze 有一种方法可以使用三个大括号而不是普通的两个来呈现 raw HTML strings

    拥有

    {{{content}}}
    

    在你的模板中应该呈现你的内容,前提是帮助器返回有效的 HTML。

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

    【讨论】:

      猜你喜欢
      • 2018-12-24
      • 1970-01-01
      • 2011-01-28
      • 1970-01-01
      • 2013-09-12
      • 1970-01-01
      • 2020-04-01
      • 2012-10-09
      • 2011-05-19
      相关资源
      最近更新 更多