closet.js

import Route from './../core/route';
import Application from '../core/application';
import Auth from './../services/auth.js';
import Products from '../models/products';
import OwnedProducts from '../models/owned_products';
import ClosetView from '../views/closet.js';

export default Route.extend({
  ownedProducts: null,
  busy: false,

  initialize: function() {
    this.ownedProducts = new OwnedProducts();
    this.ownedProducts.products = new Products();
  },

  run: function() {
    if (!Auth.isLoggedIn()) {
      return Application.getInstance().Router.back();
    }

    var closet = new ClosetView({ collection: this.ownedProducts })
      , app = Application.getInstance();

    app.closetLayout.render();

    closet.on('scroll_at_bottom', () => {
      this.fetchMore();
    });

    app.closetLayout.content.show(closet);
    if (!this.ownedProducts.length) {
      this.fetchMore();
    }
  },

  fetchMore: function() {
    if (this.busy) {
      return;
    }

    var ownedProducts = new OwnedProducts();
    ownedProducts.limit = this.ownedProducts.limit;
    ownedProducts.offset = this.ownedProducts.offset;

    this.busy = true;
    ownedProducts.fetchMore()
      .then(() => {
        var ids = ownedProducts.map(item => item.get('productId')).join(',');

        return this.ownedProducts.products.fetch({
          add: true,
          remove: false,
          merge: true,
          data: { id: ids }
        });
      })
      .then(() => {
        this.ownedProducts.limit = ownedProducts.limit;
        this.ownedProducts.offset = ownedProducts.offset;

        // clear collection to set correct one
        ownedProducts.forEach(function(model) {
          model.collection = null;
        });

        this.ownedProducts.set(ownedProducts.models, {
          add: true,
          remove: false,
          merge: true
        });

        //clean
        ownedProducts.limit = null;
        ownedProducts.offset = null;
        ownedProducts = null;

        this.busy = false;
      });
  }
});