The route-task template helper allows you to easily access tasks defined on a
route in the currently active route hierarchy. Essentially this addon is just
like ember-route-action-helper but for
ember-concurrency tasks.
ember install ember-route-task-helper
This addon will work on Ember versions 2.4.x and up only, due to use of the
new RouterService. If your Ember version does not natively support it yet, you
need to install the polyfill:
ember install ember-router-service-polyfill
Of course, you need to have ember-concurrency installed. If you haven't already, run this command first:
ember install ember-concurrency
Minimum required version is 0.6.x.
If you want to use this addon inside an engine, you'll need to have an
EngineRouterService. You can use my PoC linked in
ember-engines#587 until it's released officially as
part of ember-engines.
Wherever in a template you would access a task by its name, replace it with
(route-task "taskName") and move that task to a route. For instance:
Notice the quotes around "myTask".
You can also curry your tasks:
Let's start with a traditional task defined on a component.
// app/components/delete-user.js
import Component from '@ember/component';
import { get } from '@ember/object';
import { task, timeout } from 'ember-concurrency';
export default Component.extends({
/**
* A User record.
* @type {DS.Model}
*/
user: null,
/**
* Deletes the user after a timeout of 5 seconds.
* @type {Task}
*/
deleteUser: task(function*() {
timeout(5000); // give the user time to think about it
yield get(this, 'user').destroyRecord();
}).drop()
});And now we'll move it to a route, shall we?
// app/routes/user.js
import Route from '@ember/routing/route';
import { get } from '@ember/object';
import { task, timeout } from 'ember-concurrency';
export default Route.extends({
/**
* Deletes the current model after a timeout of 5 seconds.
* @type {Task}
*/
deleteUser: task(function*() {
timeout(5000); // give the user time to think about it
const user = this.modelFor(this.routeName);
yield user.destroyRecord();
}).drop()
});// app/routes/user.js
import Route from '@ember/routing/route';
import { get } from '@ember/object';
import { task, timeout } from 'ember-concurrency';
export default Route.extends({
/**
* Deletes the current model after a timeout of 5 seconds.
* @type {Task}
*/
deleteUser: task(function*(user) {
timeout(5000); // give the user time to think about it
yield user.destroyRecord();
}).drop()
});I personally dislike repeating (route-task) a bunch of times in my templates or even worse having to use the (get) helper to derive state from a task. You can avoid that by either only passing a task to a component (as shown in the {{task-button}} example above) or by using the {{with}} helper:
There also is a routeTask util, that's really similar to ember-invoke-action and might come in handy for JS heavy components.
// app/components/delete-user.js
import Component from '@ember/component';
import { get } from '@ember/object';
import { routeTask } from 'ember-route-task-helper';
export default Component.extends({
/**
* A User record.
* @type {DS.Model}
*/
user: null,
/**
* Deletes the user after a timeout of 5 seconds.
*/
click() {
const user = get(this, 'user');
routeTask(this, 'deleteUser').perform(user);
}
});As with the (route-task) helper, you can curry the task with as many arguments as you like. So the above is interchangeable with:
click() {
const user = get(this, 'user');
routeTask(this, 'deleteUser', user).perform();
}Internally routeTask performs a lookup for the Router everytime you call it. If you already happen to have the router instance available in your current scope, you could also pass it directly to skip the lookup:
// app/components/delete-user.js
import Component from '@ember/component';
import { get, computed } from '@ember/object';
import { getOwner } from '@ember/application';
import { routeTaskFromRouter } from 'ember-route-task-helper';
export default Component.extends({
/**
* A User record.
* @type {DS.Model}
*/
user: null,
/**
* The app's router instance.
* @type {Ember.Router}
*/
router: computed(function() {
return getOwner(this).lookup('main:router');
}).readOnly(),
/**
* Deletes the user after a timeout of 5 seconds.
*/
click() {
const router = get(this, 'router');
const user = get(this, 'user');
routeTaskFromRouter(router, 'deleteUser').perform(user);
}
});In my opinion, using routeTask in components generally isn't a good design pattern. I would much rather prefer to explicitly pass the route task as an attribute:
Just by looking at the component invocation in the template, the user should be able to judge what's going in and what's coming out of a component (DDAU). This way components remain completely agnostic and make no assumptions about the environment they are invoked in.
Calling routeTask inside a component is really non-transparent and promotes an unhealthy invisible entanglement.
On the other hand, you can already call (route-task) in the component's template.
I've implemented it for feature parity. But just because it's there, doesn't mean you have to use it. But don't let me stop you. 😜
I sincerely hope this addon serves you well. Should you encounter a bug, have a great idea or just a question, please do open an issue and let me know. Even better yet, submit a PR yourself! 😊
This addon is using the Prettier code formatter. It's embedded as a fixable eslint rule. If you're editor is set up to fix eslint errors on save, you're code is auto formatted. If not, please make sure you're not getting any linter errors.
The original idea for this addon was brought up in machty/ember-concurrency#89 by @Luiz-N. This addon is in many ways a straight copy and paste from ember-route-action-helper by @DockYard.
A huge thank you to goes out to @machty for developing ember-concurrency in the first place. ❤️