title: Output HTML using underscore and backbone
body: <p>The <code>template</code>:</p>
  
  <pre><code>&lt;div id="page-directory"&gt;&lt;/div&gt;
  &lt;script type="text/template" id="template-site"&gt;
    &lt;% if(featured) { %&gt;
      &lt;span class="featured"&gt;&lt;/span&gt;
    &lt;% } %&gt;
    &lt;a href="http://google.com"&gt;&lt;img class="screenshot" src="content/screenshot.png" /&gt;&lt;/a&gt;
    &lt;div&gt;
      &lt;h2&gt;&lt;a href="&lt;%- url %&gt;"&gt;&lt;%- title %&gt;&lt;/a&gt;&lt;/h2&gt;
      &lt;p&gt;&lt;span&gt;Tags:&lt;/span&gt;&lt;%- tags %&gt;&lt;/p&gt;
      &lt;p class="colors"&gt;&lt;span&gt;Colors:&lt;/span&gt;&lt;%- colors %&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>The <code>model</code> and <code>view</code>:</p>
  
  <pre><code>// 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;
    }
  });
  </code></pre>
  
  <p>The <code>collection</code> and <code>collection view</code>:</p>
  
  <pre><code>// 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();
    }
  });
  </code></pre>
  
  <p>and <code>sites.php</code> returns:</p>
  
  <pre><code>&lt;?php
  
  $sites = array(
      array(
          'title' =&gt; 'CGART',
          'url' =&gt; 'http://google.com',
          'featured' =&gt; true,
          'tags' =&gt; '&lt;a href="http://google.com"&gt;Tag 1&lt;/a&gt;' .
          '&lt;a href="http://google.com"&gt;Tag 1&lt;/a&gt;' .
          '&lt;a href="http://google.com"&gt;Tag 1&lt;/a&gt;',
          'colors' =&gt; '&lt;a href="http://google.com" style="background-color: #000000;"&gt;&lt;/a&gt;' .
          '&lt;a href="http://google.com" style="background-color: #ffffff;"&gt;&lt;/a&gt;',
      ),
      array(
          'title' =&gt; 'CGART',
          'url' =&gt; 'http://google.com',
          'featured' =&gt; true,
          'tags' =&gt; '&lt;a href="http://google.com"&gt;Tag 1&lt;/a&gt;' .
          '&lt;a href="http://google.com"&gt;Tag 1&lt;/a&gt;' .
          '&lt;a href="http://google.com"&gt;Tag 1&lt;/a&gt;',
          'colors' =&gt; '&lt;a href="http://google.com" style="background-color: #000000;"&gt;&lt;/a&gt;' .
          '&lt;a href="http://google.com" style="background-color: #ffffff;"&gt;&lt;/a&gt;',
      ),
  );
  
  print json_encode($sites);
  </code></pre>
  
  <p>In this case <code>tags</code> and <code>colors</code> are HTML and my code output them like below:</p>
  
  <p><img src="https://i.stack.imgur.com/ZufRC.png" alt="enter image description here"></p>
  
  <p>What is wrong with my template?</p>