Infinate route refresh two task approach

controllers.foo.js

import Ember from 'ember';

export default Ember.Controller.extend({
  people: Ember.computed.or('model.{current,previous}.value'),
  isLoading: Ember.computed.reads('model.current.isRunning'),
  fetchError: Ember.computed.reads('model.current.error'),
  
  actions: {
    fetchMore() {
      this.send('refreshModel');
    }
  }
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('foo', {path: '/'});
  this.route('bar');
});

export default Router;

routes.foo.js

import Ember from 'ember';
import { task, timeout } from 'ember-concurrency';

export default Ember.Route.extend({
  fakes: Ember.inject.service(),
  
  model(params) {
    return {
      previous: this.get('fetchTask.lastSuccessful'),
      current: this.get('fetchTask').perform(params)
    };
  },
  
  fetchTask: task(function* (params) {
    yield timeout(1000); // For illistrative purposes
    let collection = this._cache || [];
    let newResults = this.get('fakes').getMore(collection.length);
    collection.addObjects(newResults);
    this._cache = collection;
    return collection;
  }).cancelOn('deactivate'),

  deactivate() {
    this._super(...arguments);
    this._cache.clear();
  },
  
  actions: {
    refreshModel() {
      this.refresh();
    }
  }
});

services.fakes.js

import Ember from 'ember';

// Fake fetching for illistration perposes

const FAKE_DATA = [{ "name": "Derril Sivorn" }, { "name": "Marlyn Davison" }, { "name": "Kalila Sunner" }, { "name": "Augustine Gasperi" }, { "name": "Zachery Quirk" }, { "name": "Crystie Asken" }, { "name": "Esdras Danis" }, { "name": "Belinda Nuemann" }, { "name": "Lauree Hyatt" }, { "name": "Mireille Yven" }, { "name": "Adelheid Clouter" }, { "name": "Bordy Perse" }, { "name": "Peta Goaley" }, { "name": "Kelly Ketton" }, { "name": "Marisa Biddle" }, { "name": "Crystal Jovey" }, { "name": "Melania Stanwix" }, { "name": "Kenon Jatczak" }, { "name": "Calypso Drakes" }, { "name": "Sigfried Bower" }, { "name": "Evaleen Muskett" }, { "name": "Lisetta Ropkins" }, { "name": "Gran Hinkins" }, { "name": "Jermaine Deans" }, { "name": "Brett Gisbye" }, { "name": "Kassandra Wynett" }, { "name": "Eyde Workman" }, { "name": "Hubie Clubb" }, { "name": "Torrence Matteucci" }, { "name": "Norah Bridgman" }, { "name": "Xylia Ussher" }, { "name": "Olly Balsom" }, { "name": "Nara Boots" }, { "name": "Erinn Finnick" }, { "name": "Xena Filyaev" }, { "name": "Cindelyn Ollerton" }, { "name": "Shina Scaife" }, { "name": "Minni Heeron" }, { "name": "Brent Donisi" }, { "name": "Pennie Pedrol" }, { "name": "Borg Bernini" }, { "name": "Vivian MacKeogh" }, { "name": "Eugene Paschek" }, { "name": "Katherine Sempill" }, { "name": "Sibyl Elan" }, { "name": "Stormie Brauner" }, { "name": "Dita D'Aulby" }, { "name": "Lynelle Skaife d'Ingerthorpe" }, { "name": "Selinda Whisker" }, { "name": "Linet Delahunt" }, { "name": "Haze Doyle" }, { "name": "Carmelina Goudman" }, { "name": "Mary Jaqueminet" }, { "name": "Goober Strethill" }, { "name": "Tomkin Kinleyside" }, { "name": "Fidelity Manners" }, { "name": "Addy Wheildon" }, { "name": "Krissie Wesgate" }, { "name": "Annadiane Pocklington" }, { "name": "Mindy Ciccarello" }, { "name": "Palmer Clementet" }, { "name": "Lottie Cowern" }, { "name": "Dorolisa Tregaskis" }, { "name": "Edouard Macenzy" }, { "name": "Hyacinth Aldus" }, { "name": "Artemas Skouling" }, { "name": "Stanley Valentinuzzi" }, { "name": "Amata Beardmore" }, { "name": "Christina Jenk" }, { "name": "Kaiser Kalkofer" }, { "name": "Ebeneser Rizzetti" }, { "name": "Cassondra McPhail" }, { "name": "Dasie Wattingham" }, { "name": "Matthias Wynn" }, { "name": "Selby Grave" }, { "name": "Lyndy Conaboy" }, { "name": "Deedee Finn" }, { "name": "Stanislaus Bartusek" }, { "name": "Ileane Brusby" }, { "name": "Lucienne Jickles" }, { "name": "Yevette Corthes" }, { "name": "Bernete Sterrick" }, { "name": "Moreen Scrimshaw" }, { "name": "Erin Gallyhaock" }, { "name": "Carilyn MacCahey" }, { "name": "Zara Hatton" }, { "name": "Daphene Gladwell" }, { "name": "Isidoro Dykas" }, { "name": "Jerad Olliar" }, { "name": "Rachelle Pantling" }, { "name": "Olive Fergyson" }, { "name": "Odessa Vondrak" }, { "name": "Napoleon Vamplus" }, { "name": "Wes Fardy" }, { "name": "Brion Tash" }, { "name": "Harold Penberthy" }, { "name": "Maude Bidewell" }, { "name": "Carita Cleveley" }, { "name": "Elwira Compton" }, { "name": "Baillie Butlin" }];

export default Ember.Service.extend({
  getMore(offset = 0) {
    return FAKE_DATA.slice(offset, offset + 10);
  }
});

templates.application.hbs

<div class="hack container">

{{outlet}}

</div>

templates.bar.hbs

<div class="alert alert-info">
  This is a fake route so you can see the leaving and returning logic.
</div>
  
{{#link-to "foo" tagName="button" class="btn btn-primary btn-block"}}
  Return to foo route
{{/link-to}}

templates.foo.hbs

<div>There are {{people.length}} people in the list.</div>
  
<ol>
  {{#each people as |person|}}
    <li>{{person.name}}</li>
  {{else}}
    <li>No people</li>
  {{/each}}
</ol>
  
{{#if isLoading}}
  <div class="alert alert-info">
    <span class="loading"></span>
    Loading &hellip;
  </div>
{{/if}}

{{#if error}}
  <div class="alert alert-error">{{error}}</div>
{{/if}}

<p>
  <button class="btn btn-primary btn-block" {{action "fetchMore"}}>
    Fetch More
  </button>
</p>

<p>
  {{#link-to "bar" tagName="button" class="btn btn-default btn-block"}}
    Navigate to bar route
  {{/link-to}}
</p>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "hack_css": "https://cdnjs.cloudflare.com/ajax/libs/hack/0.8.0/hack.css",
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-concurrency": "0.8.1"
  }
}