title: Rendering a dropdown Menu in Backbone
body: <p>I am new to Backbone and am trying to stumble my way through it.  At the moment I have a view that renders a json hash into a dropdown menu. When I inspect the element in the browser I can actual view the UL element with all of the JSON rendered into a list, yet nothing visually appears in the browser. It should be noted that I am using twitter bootstrap to build the dropdown menu. Any help is much appreciated.</p>
  
  <pre><code>App.Views.FilterView = Backbone.View.extend({
    initialize: function(){
    _.bindAll(this, 'render');
    this.$button = this.$('.dropdown');
    this.listenTo(this.collection, 'sync', this.render);
  },
  
  render: function(){
    html = _.template(this.template());
    this.$el.html(html);
  },
  
  template: function() {
    var criteria = initial_data.criteria_hash.servers.criteria;    
    var list = "";
  
    for(var i = 0;  i &lt; criteria.length; i++){
      list += "&lt;li role=\"presentation\"&gt;" + criteria[i]  + "&lt;/li&gt;";
    }
    return "&lt;ul class='criteria-list dropdown-menu' role=\"menu\"&gt;" + list + "&lt;/ul&gt;";
    }
  });
  </code></pre>
  
  <p>Here is the HAML: </p>
  
  <pre><code>    %h2.beta Reports 
        .criteria-container
          .dropdown
            %button.btn.btn-default.dropdown-toggle{"data-toggle" =&gt; "dropdown"}
              Search Criteria
              %span.caret
  </code></pre>