Output HTML using underscore and backbone

Question

The template:

<div id="page-directory"></div>
<script type="text/template" id="template-site">
  <% if(featured) { %>
    <span class="featured"></span>
  <% } %>
  <a href="http://google.com"><img class="screenshot" src="content/screenshot.png" /></a>
  <div>
    <h2><a href="<%- url %>"><%- title %></a></h2>
    <p><span>Tags:</span><%- tags %></p>
    <p class="colors"><span>Colors:</span><%- colors %></p>
  </div>
</script>

The model and view:

// Define a Site Model.
var Site = Backbone.Model.extend({
  defaults: {
    url: '',
    title: '',
    featured: false,
    tags: '',
    colors: ''
  }
});
// Define a Site View.
var SiteView = Backbone.View.extend({
  tagName: "article",
  template: _.template($("#template-site").html()),
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});

The collection and collection view:

// Define a Sites Collection.
var Sites = Backbone.Collection.extend({
  url: 'sites.php',
  model: Site
});
// Define a Sites View.
var SitesView = Backbone.View.extend({
  el: $('#page-directory'),
  initialize: function() {
    this.collection.on('add', this.addOne, this);
    this.collection.on('reset', this.addAll, this);
  },
  addOne: function(site) {
    var siteView = new SiteView({model: site});
    this.$el.append(siteView.render().el);
  },
  addAll: function() {
    this.collection.forEach(this.addOne, this);
  },
  render: function() {
    this.addAll();
  }
});

and sites.php returns:

<?php

$sites = array(
    array(
        'title' => 'CGART',
        'url' => 'http://google.com',
        'featured' => true,
        'tags' => '<a href="http://google.com">Tag 1</a>' .
        '<a href="http://google.com">Tag 1</a>' .
        '<a href="http://google.com">Tag 1</a>',
        'colors' => '<a href="http://google.com" style="background-color: #000000;"></a>' .
        '<a href="http://google.com" style="background-color: #ffffff;"></a>',
    ),
    array(
        'title' => 'CGART',
        'url' => 'http://google.com',
        'featured' => true,
        'tags' => '<a href="http://google.com">Tag 1</a>' .
        '<a href="http://google.com">Tag 1</a>' .
        '<a href="http://google.com">Tag 1</a>',
        'colors' => '<a href="http://google.com" style="background-color: #000000;"></a>' .
        '<a href="http://google.com" style="background-color: #ffffff;"></a>',
    ),
);

print json_encode($sites);

In this case tags and colors are HTML and my code output them like below:

What is wrong with my template?

Answer 1

I think you're misunderstanding how <%=...%> and <%-...%> work in Underscore templates. From the fine manual:

Template functions can both interpolate variables, using <%= … %>,
[...]
If you wish to interpolate a value, and have it be HTML-escaped, use <%- … %>

So if you say <%= v %>, v goes right into the template as-is, if you say <%- v %> then v will be HTML escaped before going into the template. Consider a simple template like this:

<script id="t" type="text/x-underscore">
    &lt;%=: <%= html %>
    <br>
    &lt;%-: <%- html %>
</script>

and throw some HTML at it:

var t = _.template($('#t').html());
$(whatever).html(
    t({ html: '<span>html</span>' })
);

Given that input, you'll get this output:

&lt;%=: <span>html</span>
&lt;%-: &lt;span&gt;html&lt;/span&gt;

Demo: http://jsfiddle.net/ambiguous/pL92b/

Your tags comes from the server with embedded HTML:

'tags' => '<a href="http://google.com">Tag 1</a>'

but you're escaping that HTML in your template:

<p><span>Tags:</span><%- tags %></p>

You should be able to switch to simple interpolation:

<p><span>Tags:</span><%= tags %></p>
<!-- ------------------^         -->

to sort out your display.