/src/views/sitelistview.js

define([
  'underscore', 'backbone',
  'models/sitecollection',
  'views/listview',
  'views/siteview'
],
function (util, Backbone, SiteCollection, ListView, SiteView) {
  var superproto = ListView.prototype;
  // A widget that contains the views for a collection of sites.
  var SiteListView = ListView.extend({
    className: 'sites',
    
    initialize: function (options) {
      var self = this;
      options = options || {};
      
      options.view = options.view || SiteView;
      options.collection = options.collection || new SiteCollection();
      
      superproto.initialize.call(this, options);
      
      // Collection Events
      this.collection
        .bind('fetch', this.renderLoader, this)
        .bind('success', this.removeLoader, this);
      
      // View events
    },
    
    fetch: function () {
      var collection = this.collection;
      collection.fetch.apply(collection, arguments);
    },

    renderLoader: function () {
      // Create a new loader and assign it to a property so we can easily
      // remove it later. Creating a new loader every time means we don't
      // have to undo the animation leftovers from removeLoader.
      this.$loader = $('<div class="loading pin-center">Loading&hellip;</div>')
        .css({ opacity: 0 });
      
      $(this.el).append(this.$loader);
      this.$loader.animate({ opacity: 0.5, scale: 1 }, 500, 'ease-out');
      
      return this;
    },
    
    removeLoader: function () {
      var $loader = this.$loader;
      $loader.animate(
        { opacity: 0,  scale: 1.5 },
        400,
        'ease-in',
        // After animating the loader, remove it from the DOM.
        function () { $loader.remove(); }
      );

      return this;
    },
    
    render: function () { return this; }
  });
  
  return SiteListView;
});