Emberjs：モデル操作でローテーションスピナーと通知メッセージを表示する方法

Question

ember.js 1.2を使用しています。私のモデルでのクラッシュ操作中にローディングスピナーと通知メッセージを表示しようとしているときに問題が発生しました。ここで

は、コードは次のとおりです。ここ

var MyModelController = Ember.ObjectController.extend({ 
    needs: ['application'], 
    application: Ember.computed.alias("controllers.application"), 
    actions: { 
    save: function() { 
     var _this = this; 

     // Display the spinner 
     this.get('application').get('loading').trigger(true); 

     this.get('model').save().then(function(response) { 
     // Hide the spinner 
     _this.get('application').get('loading').trigger(false); 

     // Display the success message 
     _this.get('application').get('flash').success('The model has been updated.'); 
     }, function(response) { 
     // Hide the loading spinner 
     _this.get('application').get('loading').trigger(false); 

     // Display the error message 
     _this.get('application').get('flash').danger('Error updating the model.'); 
     }); 
    } 
    } 
}); 

二つの主要な問題：

• まず：スピナーは0.5秒を要する訳で表示されますが、保存操作は以下の期間で行われますスピナーが表示され、すぐに消えます。ここでは、アニメーションが正しく実行されるように、モデルで保存操作が呼び出される前に1秒タイマーを設定したいと考えています。どうすればそれが可能なのでしょうか？

• 2番目：my flashオブジェクトのsuccessメソッドは、テンプレートの{{view.message}}にバインドされています。私がこのメソッドを「約束」の外に呼び出すと、メッセージはうまく表示されますが、私の場合はバインディングが行われていないかのようにはなりません。私は約束を使うために途中で何かを逃しましたか？このメッセージを表示するにはどうしたらいいですか？

Answer 1

実装することをお勧めします：ソリューションに道を譲ったkingpin2kを。従来のLoadingRouteは、約束が復帰するまでに多くの時間がかかるときに呼び出されます。私は私の約束を返す前に、少なくとも500ミリ秒を取ることを余儀なくルートでその後

var ApplicationRoute = Ember.Route.extend({ 
    actions: { 
    loading: function() { 
     var _app = this.controllerFor('application'); 
     _app.get('loading').trigger(true); 
     this.router.one('didTransition', function() { 
     _app.get('loading').trigger(false); 
     }); 
    } 
    } 
}); 

：だから私はそれをこのように書きました。アニメーションのスピナーが表示され、UIが正しく更新されます。

model: function() { 
    var _this = this; 
    return new Ember.RSVP.Promise(function(resolve) { 
    setTimeout(function() { 
     resolve(_this.get('store').find('model')); 
    }, 500); 
    }); 
}, 

この方法では、ルートのモデルフックを使用してデータを取得できます。しかし、保存ボタンからモデルを更新するために、私は保存アクションを実装する特定のModelControllerを書きました。その後、単一のリソースを管理するすべての私のコントローラがそれを拡張：

var ModelController = Ember.ObjectController.extend({ 
    needs: ['application'], 
    updateOKMessage: null, 
    updateKOMessage: null, 
    application: Ember.computed.alias("controllers.application"), 
    actions: { 
    save: function() { 
     var _this = this; 
     var _app = _this.get('application'); 

     // Display the loading spinner 
     _app.get('loading').trigger(true); 

     // Wait during 500ms to let the animation occurs 
     setTimeout(function() { 

     // Save the model 
     _this.get('model').save().then(function(response) { 
      setTimeout(function() { 
      // Set the message of the flash from a timeout 
      // if not, the message does not appear 
      _app.get('flash').success(_this.get('updateOKMessage')); 
      }, 100); 
     }, function(response) { 
      setTimeout(function() { 
      // Same issue (or maybe it is not an issue) 
      _app.get('flash').danger(_this.get('updateKOMessage')); 
      }, 100); 
      if(response.status === 422) { 
      _this.get('model').set('errors', response.responseJSON.errors); 
      } 
     }).then(function() { 
      setTimeout(function() { 
      _app.get('loading').trigger(false); 
      }, 600); 
     }); 
     }, 500); 
    } 
    } 
}); 

私は、タイマーコールバックからの代わりに、約束の復帰方法からそれらを設定するフラッシュメッセージの問題を修正しました。

Answer 2

あなたはロードルートのローディングスピナーに関する

http://emberjs.com/guides/routing/loading-and-error-substates/

https://gist.github.com/machty/6944577

Answer 3

私の解決策はかなりシンプルで、私が想定している方法ではありません。しかし、それは素晴らしい作品と非常に多くの新しいファイル/ヘルパーを起動しません：

アプリ/路線/ application.js

import Ember from 'ember'; 

export default Ember.Route.extend(Ember.Evented, { 
    actions: { 
    loading: function() { 
     // enable/disable spinner when model is loading slow 
     Ember.$('#blur').css('-webkit-filter', 'blur(3px)') 
     Ember.$('#spinner').css('display', 'flex') 
     this.router.one('didTransition', function() { 
     Ember.$('#blur').css('-webkit-filter', 'blur(0px)') 
     Ember.$('#spinner').css('display', 'none') 
     }); 
    } 
    } 
});