vincentbello

import Ember from 'ember';

export default Ember.Component.extend({
  items: ['hello', 'world'],
  
  displayedItems: Ember.computed('visibilityMap', 'items', function () {
		const visibilityMap = this.get('visibilityMap');
    const items = this.get('items');

    return items.filter(item => {

vincentbello

// Callback functions
function fetchData() {
  this.fetch('data', (data) => {
    this.updateUI();
  });
}

// Promises
function fetchData() {
  this.fetch('data')

vincentbello

{{#each model as |product|}}
  {{#if product.taskInstance.isRunning}}
    Loading data for {{product.name}}...
  {{else if product.taskInstance.error}}
    An error occurred: {{product.taskInstance.error}}
  {{else if product.taskInstance.value}}
    {{product-panel data=product.taskInstance.value}}
  {{/if}}
{{/each}}

vincentbello

export default Ember.Route.extend({
  /** Use the url params to fetch the model data */
  model(params) {
    if (!Ember.isEmpty(params.products)) {
      return params.products.map((product) => {
        return {
          name: product,
          taskInstance: this.get('findProductTask').perform(product),
        };
      });

vincentbello

{{#if model.taskInstance.isRunning}}
  Loading data...
{{else if model.taskInstance.error}}
  An error occurred.
{{else if model.taskInstance.value}}
  <header>
    {{model.taskInstance.value.productName}}
  </header>
  ...
{{/if}}

vincentbello

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

export default Ember.Component.extend({
  // Periodically refresh product info on init
  _reloadDataTask: task(function * () {
    while (true) {
      yield timeout(30 * 1000); // Wait 30 seconds

      if (this.get('product')) {

vincentbello

// components/product-overview.js

import Ember from 'ember';

export default Ember.Component.extend({
  timer: Ember.inject.service(),

  // Periodically refresh product info
  init() {
    this.get('timer').start(() => {

vincentbello

// General purpose timer service
import Ember from 'ember';

export default Ember.Service.extend({
  interval: 5000,

  // Schedules function `f` to be executed on interval
  schedule(f, interval) {
    const time = interval || this.get('interval');
    return Ember.run.later(this, function() {