title: Rendering Backbone.js Collection as a select list
body: <p>I'm trying to render a Backbone.js collection as a <code>select</code> list using an Underscore.js template, and the list isn't getting populated. The <code>select</code> element is displaying, but there are no <code>options</code>. </p>
  
  <p>I have confirmed that I'm able to pass individual properties into my template and render them as <code>label</code> elements, so the issue must be how I'm trying to handle the collection. </p>
  
  <p>Here's my Backbone code:</p>
  
  <pre><code>Rate = Backbone.Model.extend({
      duration : null
  });
  
  Rates = Backbone.Collection.extend({
      initialize: function (model, options) {
      }
  });
  
  AppView = Backbone.View.extend({
      el: $('#rate-editor-container'),
      initialize: function () {
        this.rates = new Rates(null, { view: this } );
  
        this.rates.add(new Rate ({ duration: "Not Set" }));
        this.rates.add(new Rate ({ duration: "Weekly" }));
        this.rates.add(new Rate ({ duration: "Monthly" }));
  
        this.render();
      },
      render: function() {
        var rate_select_template = _.template($("#rate_select_template").html(), {rates: this.rates, labelValue: 'Something' });
        $('#rate-editor-container').html(rate_select_template);
      },
  });
  
  var appview = new AppView();
  </code></pre>
  
  <p>And my template:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;script type="text/template" id="rate_select_template"&gt;
    &lt;select id="rate-selector"&gt;&lt;/select&gt;
    &lt;% _(rates).each(function(rate) { %&gt;
      &lt;option value="&lt;%= rate.duration %&gt;"&gt;&lt;%= rate.duration %&gt;&lt;/option&gt;
    &lt;% }); %&gt;
  &lt;/script&gt;
  
  &lt;div id="rate-editor-container"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Any suggestions?</p>