javascriptmarionettebackbone.js-collections

Display a Backbone collection with HTML formatting

I have a Marionette CollectionView displaying some data from a collection. It's all working fine BUT some items in my collection has HTML tags.

To make it easier, here is only two items:

var topics = [
  { content: 'This is a <strong>bold</strong> content' },
  { content: 'This is a <i>italic</i> content' }
];

On screen is being displayed:

This is a <strong>bold</strong> content

This is a <i>italic</i> content

instead of

This is a bold content

This is a italic content

There is some Marionette native attribute to allow HTML formatting or should I write a function to convert the HTML entities? Thank you for advance.

Solution

  • Assuming you are using Underscore/JS templates, you just need to make sure you are interpolating the values (using <%=):

    <div><%= content %></div>

    vs HTML-escaping:

    <div><%- content %></div>

    The following fiddle shows a more complete example: https://jsfiddle.net/8m7ot074/

    If you are using handlebars to handle your templating, you'd need to use the 'triple-stache': {{{content}}}