Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Infinate route refresh two task approach
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');
}
}
});
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;
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();
}
}
});
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);
}
});
<div class="hack container">
{{outlet}}
</div>
<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}}
<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>
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment