/src/views/sitelistview.js
JavaScript | 65 lines | 45 code | 13 blank | 7 comment | 3 complexity | 6139ceb76f04be523304ccd0517d4541 MD5 | raw file
- 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…</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;
- });