title: Backbone pre rendering of collection models
body: <p>I want to perform an action, clearing parent element, after a collection has fetched his models but prior to the models rendering.</p>
  
  <p>I've stumbled upon <a href="https://gist.github.com/sagar-ganatra/4632091" rel="nofollow">before and after render methods</a> yet they are model specific, which will cause my parent element to clear before every model rendering.</p>
  
  <p>I'm able of course to perform the action pre-fetching yet I want it to occur when fetch is done and before models are rendered.</p>
  
  <p>I tried using reset and change events listening on the collection yet both resulted unwanted end result.
  Reset event seamed to go in that direction yet the passed argument was the entire collection and not a single model from the collection, therefore using the add event callback wasn't possible due to difference in argument type (collection and not a model as required)</p>
  
  <p>Any ideas how to invoke a callback when fetch a collection fetch is successful yet models are yet to be rendered?</p>
  
  <p>The model contains the returned attributes while collection contains url for fetching and parse method to return argument wrapped object.</p>
  
  <p>Below is the code I use to render the collection view, which is basically rendering each model's view within the collection.</p>
  
  <pre><code>Collection View
  ---------------
  var FoosView = Backbone.View.extend({
          el: '#plans',
          events: {
              //'click tr': 'rowClick'
          },
          initialize: function() {
              this.listenTo(this.collection, 'add', this.renderNew);
  
              _.bindAll(this, "render");
  
              this.render();
          },
          renderNew: function(FooModel) {
  
              var item = new FooView({model: FooModel});
              this.$el.prepend(item.render().$el);
          }
          ...
      });
  
  The model view
  --------
  var FooView = Backbone.View.extend({
          tagName: 'li',
          initialize: function(options) {
              this.options = options || {};
              this.tpl = _.template(fooTpl);
          },
          render: function() {
              var data = this.model.toJSON();
  
              this.$el.html(this.tpl(data));
  
              return this;
          }
      });
  </code></pre>
  
  <p>Thanks in advance.</p>