Emberjs: как отображать загрузочные счетчики и уведомления о работе модели

Question

Я использую ember.js 1.2 и сталкиваюсь с проблемой при попытке отобразить загрузку счетчика и уведомлений во время операций crud на моих моделях.

Вот код:

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с, но операция сохранения выполняется с меньшей длительностью и счетчик отображается и немедленно исчезает. Здесь я хотел бы установить таймер 1s, прежде чем операция сохранения вызывается на моей модели, чтобы убедиться, что анимация выполнена правильно. Как это возможно?

• Во-вторых: метод успеха на моем объекте Flash привязан к определенному {{view.message}} шаблону. Если я вызову этот метод вне «затем» обещания, сообщение будет хорошо отображаться, но в моем случае это не так, как будто привязка не выполняется. Я что-то пропустил, чтобы использовать обещание? Как можно отобразить это сообщение?

Answer 1

Что касается погрузочной блесны: kingpin2k дал путь к решению. Legacy LoadingRoute вызывается, когда обещание требует много времени для возврата. Так что я написал об этом так:

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); 
     }); 
    } 
    } 
}); 

Тогда в маршрутах я заставил мои обещания взять хотя бы 500мс перед возвращением. Таким образом появляется анимация spinner, и пользовательский интерфейс будет правильно обновлен.

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

Этот способ работает для получения данных через крючок модели маршрута. Но для обновления модели с помощью кнопки сохранения я написал конкретный ModelController, который реализует действие save; то все мои контроллеры, которые управляют один ресурсом продлить его:

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

Мое решение было довольно простым, а не «ember», как я полагаю. но это работает хорошо и не порождает слишком много новых файлов/хелперы:

приложение/маршруты/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') 
     }); 
    } 
    } 
});