title: How do I add a blank option to a select generated by a Marionette CollectionView?
body: <p>I am rendering a Backbone collection as a <code>select</code> element, and I want it to have a blank <code>option</code> at the top.</p>
  
  <p>I am a bit unsure how to best do this using a Marionette <code>CollectionView</code>. (I am aware of the <code>CompositeView</code> but I don't really feel it fits this usecase).</p>
  
  <p>So far I've tried using the <code>onBeforeRender</code> hook to add the option</p>
  
  <pre><code>onBeforeRender: function() {
    var option = $('&lt;option&gt;').html('')
    this.$el.append(option);
  }
  </code></pre>
  
  <p>The problem I'm facing is that render is actually being called twice, since my <code>CollectionView</code> is inside a <code>LayoutView</code> which calls the render function when it shows the view</p>
  
  <pre><code>this.getRegion('body').show(new SelectView({
    collection: collection
  }));
  </code></pre>
  
  <p>And then render is triggered again when its collection is reset</p>
  
  <pre><code>collection.reset([{ name: 'a' },{ name: 'b' }]);
  </code></pre>
  
  <p>I've verified that this is what's happening by using the debugger and looking at the callstack.</p>
  
  <p>Complete snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    
  var collection = new Backbone.Collection({
    model: Backbone.Model
  });
  
  
  var Layout = Backbone.Marionette.LayoutView.extend({
    
    regions: {
      body: '#main'
    },
    
    template: false,
    
    onRender: function() {
      this.getRegion('body').show(new SelectView({
        collection: collection
      }));
    }
  });
  
  var OptionView = Backbone.Marionette.ItemView.extend({
    tagName: 'option',
    template: _.template('&lt;%= name %&gt;')
  });
    
  var SelectView = Backbone.Marionette.CollectionView.extend({
     tagName: 'select',
     childView: OptionView,
     onBeforeRender: function() {
       var option = $('&lt;option&gt;').html('')
       this.$el.append(option);
     }
  });
  
  var layout = new Layout({
    el: $('#app')
  });
  layout.render();
  var app = new Marionette.Application();
  
  app.start();
  Backbone.history.start();
  
  collection.reset([{ name: 'a' },{ name: 'b' }]);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script data-require="underscore.js@1.6.0" data-semver="1.6.0" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"&gt;&lt;/script&gt;  
  &lt;script data-require="jquery@2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"&gt;&lt;/script&gt;
  &lt;script data-require="backbone.js@1.1.2" data-semver="1.1.2" src="http://backbonejs.org/backbone-min.js"&gt;&lt;/script&gt;
  &lt;script data-require="marionette.js@2.2.2" data-semver="2.2.2" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.2.2/backbone.marionette.js"&gt;&lt;/script&gt;
  
  &lt;body&gt;
    &lt;div id="app"&gt;
      &lt;div id="main"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now in this snippet I could fix the issue by simply resetting the collection at the start of the script instead of at the end, but in my application that is not a possible solution.</p>
  
  <p>I can think of a few solutions to this, but they all feel a bit wrong, I most certainly don't want to maintain any state for this in my view. The least worst thing I could think of was to change to</p>
  
  <pre><code>onBeforeRender: function() {
    this.$el.html('')
    var option = $('&lt;option&gt;').html('')
    this.$el.append(option);
  }
  </code></pre>
  
  <p>But since the framework doesn't seem to empty the <code>$el</code> itself I am guessing there's a reason for that.</p>
  
  <p>Is this a legit usecase for <code>CompositeView</code> or is there some other smart way to do this that I have missed?</p>