Изменения в режиме просмотра Ember

Question

У меня возникла проблема с анимацией изменения определенного вида. У меня есть два представления, которые используют среди других свойств один и тот же параметр «options». DrawVisualizationView на самом деле рисует диаграмму с параметрами, полученными из входов из OptionsView.

.hbs файл:

<!-- Options Part --!> 
<div> 
    {{view App.OptionsView options=controller.options}} 
</div> 
<!-- Visualization Part --!> 
<div id="visualization"> 
    {{view App.DrawVisualizationView options=controller.options}} 
</div> 

Я использую ember-animate производить некоторые анимации между маршрутами, и я хотел бы производить анимацию при изменении параметров и график перерисовывается. Например, старый будет исчезать, и новый новый будет исчезать. Оба представления используют VisualizationController и VisualizationRoute, поэтому у меня нет переходов между маршрутами и контроллерами.

Вот DrawVisualizationView

App.DrawVisualizationView = Ember.View.extend({ 
 
     willAnimateIn: function() { //ember-animate method 
 
      //preparation 
 
     }, 
 
     
 
     animateIn: function(done) { 
 
      //some animation 
 
     }, 
 
    
 
     animateOut: function(done) { 
 
      //some animation 
 
     }, 
 
    
 
     drawVisualization: function(){ 
 
      //draw a chart 
 
     }.observes('options.@each').on('didInsertElement') 
 
     
 
    });

The VisualizationController настроен таким образом, что каждое изменение в options в OptionsView вызывает перерисовки диаграммы через DrawVisualizationView.

willAnimateIn, animateIn и animateOut Работает только один раз при загрузке страницы.

Я пробовал такие события, как didInsertElement и добавлял eventManager, но ни один из них не запускается, когда DrawVisualizationView вызывается после изменения параметров.

Есть ли способ инициировать анимированные действия DrawVisualizationView, если определенная опция изменена?

Answer 1

Автор ember-animate. Если вы хотите, чтобы ваш вид повторно оживился при изменении options, сделайте следующее:

App.DrawVisualizationView = Ember.View.extend({ 

    willAnimateIn: function() { //ember-animate method 
     //preparation 
    }, 

    animateIn: function(done) { 
     //some animation 
    }, 

    animateOut: function(done) { 
     //some animation 
    }, 

    drawVisualization: function() { 

     this.animateOut(function() { 
      this.willAnimateIn(); 
      this.animateIn(); 
     }.bind(this)); 

    }.observes('options.@each') 

});