YOSHINO日記

プログラミングに関すること

Ember.js 入門10: 非同期的なルーティング: RSVPを使ってロード時とエラー時の処理を行う

RSVPオブジェクト

Asynchronous Routing

ローディング時間の間の処理

app/router.js

Router.map(function() {
  this.route('students');
});

Promiseを定義します。

app/routes/students.js

import Route from '@ember/routing/route';

export default Route.extend({
  model(){
    return new Ember.RSVP.Promise(function(resolve, reject) {
      Ember.run.later((function(){
        resolve([1,2,3,4,5,6,7,8,9]);
      }), 2000);
    });
  },

app/templates/students-loading.hbs

<h1>Loading! Please wait!</h1>

というファイルを追加します。

ローディングしている間の処理はこれだけです。

http://localhost:4200/students

にアクセスすると、2秒間の待ち時間の間、students-loading.hbsレンダリングされることがわかります。

ローディングをした後の処理をactionsで追加することもできます。

その場合、app/routes/students.jsに以下のように追記します。

  actions: {
    loading(transition, originRoute) {
      alert('Sorry this page is taking so long to load!');
      this.transitionTo('application');
    }
  }
});

エラーが起こった時の処理

loadingと同じように処理できます。

※ students-error.hbsもloadingと同じように自動でレンダリングできると思いましたが、できませんでした。

import Route from '@ember/routing/route';

export default Route.extend({
  model(){
    return new Ember.RSVP.Promise(function(resolve, reject) {
      reject('error');
    });
  },
  actions: {
    error(transition, originRoute) {
      alert('Sorry this page is taking so long to load!');
      this.transitionTo('application');
    }
  }
});