Skip to content

Instantly share code, notes, and snippets.

@jenweber
Last active May 27, 2021 16:08
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jenweber/443dac9876c7ef2b1115093cfd5d6fac to your computer and use it in GitHub Desktop.
Save jenweber/443dac9876c7ef2b1115093cfd5d6fac to your computer and use it in GitHub Desktop.
How to use Ember Concurrency with Octane
// Octane
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { task } from 'ember-concurrency';
export default class MyOctaneComponent extends Component{
@tracked status = null
@(task(function * () {
let nums = [];
for (let i = 0; i < 3; i++) {
nums.push(Math.floor(Math.random() * 10));
}
this.status = `My favorite numbers: ${nums.join(', ')}`;
})) pickRandomNumbers;
};
// classic component for comparison. See http://ember-concurrency.com/docs/task-function-syntax/
import Component from '@ember/component';
import { task } from 'ember-concurrency';
export default Component.extend({
status: null,
pickRandomNumbers: task(function * () {
let nums = [];
for (let i = 0; i < 3; i++) {
nums.push(Math.floor(Math.random() * 10));
}
this.set('status', `My favorite numbers: ${nums.join(', ')}`);
}),
});
@ChangJoo-Park
Copy link

ChangJoo-Park commented May 7, 2020

Hello @jenweber
I use ember-concurrency with ember octane. can you explain with handlebars?
I try to set pickRandomNumbers on button.

<button type="button" {{on 'click' this.pickRandomNumbers}}>CLICK </button>

but it can't work. So, I add @action decorator with task

  @action
  @(task(function * () {
    let nums = [];
    for (let i = 0; i < 3; i++) {
      nums.push(Math.floor(Math.random() * 10));
    }

    console.log(`My favorite numbers: ${nums.join(', ')}`)
  })) pickRandomNumbers;

It can't work too.


Finally I use action for call perform task

  @(task(function * () {
    let nums = [];
    for (let i = 0; i < 3; i++) {
      nums.push(Math.floor(Math.random() * 10));
    }

    console.log(`My favorite numbers: ${nums.join(', ')}`)
  })) pickRandomNumbers;

  @action
  callPickRandomNumbers() {
    this.pickRandomNumbers.perform()
  }
<button type="button" {{on 'click' this.callPickRandomNumbers}}>CLICK </button>

It works. but how can I use perform keyword with on ?

@acehand
Copy link

acehand commented Jun 11, 2020

<button type="button" {{on "click" (perform callAction)}}>Save</button> - this is how I call perform and it works

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment