title: Common pattern for populating select list data in Backbone views?
body: <p>My Backbone app has several views containing forms with text inputs select fields, and checkboxes. The select fields should be populated using data from my API. A given select field may be reused in multiple different forms.</p>
  
  <p>What's a commonly-used approach for populating these dropdowns? Here's a solution I've rigged together...<strong>is there a more common approach?</strong></p>
  
  <p>A reusable select field which populates itself...app/views/shared/location_selection.js:</p>
  
  <pre><code>define([
    'jquery',
    'backbone',
    'app/views/base',
    'app/collections/location'
  ], function($, Backbone, BaseView, LocationCollection) {
    'use strict';
  
    return BaseView.extend({
      initialize: function(options) {
        this.options = options || {};
        this.options.id = this.options.id || 'location';
        this.options.showBlank = typeof this.options.showBlank != 'undefined' ? this.options.showBlank : false;
  
        this.collection = new LocationCollection();
      },
  
      render: function() {
        this.setElement('&lt;select id="' + this.options.id + '"&gt;&lt;/select&gt;');
  
        var self = this;
        this.collection.fetch({
          success: function() {
            if (self.options.showBlank) {
              self.$el.append('&lt;option&gt;&lt;/option');
            }
  
            self.collection.each(function(model) {
              self.$el.append('&lt;option value="' + model.get('id') + '"&gt;' + model.get('name') + '&lt;/option&gt;');
            });
          }
        });
  
        return this;
      }
    });
  });
  </code></pre>
  
  <p>And a snippet from another view which uses that view:</p>
  
  <pre><code>render: function() {
    this.$el.html(this.template(this.model.toJSON()));
  
    var locationSelectionView = new LocationSelectionView({ showBlank: !this.model.get('id') });
    this.$('.location').append(locationSelectionView.render().el);
  
    return this;
  },
  </code></pre>
  
  <p>And the form template:</p>
  
  <pre><code>&lt;form role="form"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="imei"&gt;IMEI&lt;/label&gt;
      &lt;input type="text" class="form-control" id="imei" value="{{data.imei}}" /&gt;
    &lt;/div&gt;
    &lt;div class="form-group location"&gt;
      &lt;label for="location"&gt;Location&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="checkbox"&gt;
      &lt;label&gt;&lt;input id="master" type="checkbox"{{#if master}} checked="checked"{{/if}} /&gt; Master&lt;/label&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>