Ember.js - Общение между контроллерами и их представлениями

Question

Я только на ранней стадии обучения Ember и столкнулся с чем-то озадачивающим. Я пытаюсь установить связь между двумя контроллерами и обновлять их соответствующие представления.

В упрощенной версии я хотел бы нажать кнопку, чтобы запустить событие на одном контроллере, который запускает таймер на другом контроллере. Это работает, но просмотр таймера не обновляется при изменении значения.

Вот что у меня есть:

var App = Ember.Application.create(); 

App.Route = Ember.Route.extend({ 
    events: { 
     startTimer: function(data) { 
      this.get('container').lookup('controller:Timer').start(); 
     } 
    } 
}); 

App.ApplicationController = Ember.Controller.extend({ 

    actionWord: 'Start', 

    toggleTimer: function() { 
     var timer = this.get('container').lookup('controller:Timer'); 

     if(timer.get('running')) { 
      timer.stop(); 
     } else { 
      timer.start(); 
      this.set('actionWord', 'Stop'); 
     } 
    } 
}); 

App.TimerController = Ember.Controller.extend({ 

    time: 0, 
    running: false, 
    timer: null, 

    start: function() { 
     var self = this; 

     this.set('running', true); 

     this.timer = window.setInterval(function() { 
      self.set('time', self.get('time') + 1); 
      console.log(self.get('time')); 
     }, 1000); 
    }, 

    stop: function() { 
     window.clearInterval(this.timer); 
     this.set('running', false); 
     this.set('time', 0); 
    } 

}); 

и для шаблонов:

<script type="text/x-handlebars"> 
    {{ render "timer" }} 

    <button {{action toggleTimer }} >{{ actionWord }} timer</button> 
</script> 

<script type="text/x-handlebars" data-template-name="timer"> 
    {{ time }} 
</script> 

http://jsfiddle.net/mAqYR/1/

UPDATE:

забыл упомянуть, что если вы откроете консоль, вы может видеть, что время обновляется внутри функции TimeController, это просто не отображается в представлении.

Кроме того, при вызове начального действия на TimerController напрямую корректно обновляется представление.

Спасибо!

Answer 1

Вы использовали устаревшую версию Ember. Я обновил вашу скрипку до Ember rc3. Также я заменил экземпляры container.lookup правильными методами. container - довольно частный объект.

http://jsfiddle.net/3bGN4/255/

window.App = Ember.Application.create(); 

App.Route = Ember.Route.extend({ 
    events: { 
     startTimer: function(data) { 
      this.controllerFor('timer').start(); 
     } 
    } 
}); 

App.ApplicationController = Ember.Controller.extend({ 
    actionWord: 'Start', 
    needs: ["timer"], 
    toggleTimer: function() { 
     var timer = this.get('controllers.timer'); 
     if(timer.get('running')) { 
      timer.stop(); 
     } else { 
      timer.start(); 
      this.set('actionWord', 'Stop'); 
     } 
    } 
}); 

App.TimerController = Ember.Controller.extend({ 
    time: 0, 
    running: false, 
    timer: null, 

    start: function() { 
     var self = this; 
     this.set('running', true); 
     this.timer = window.setInterval(function() { 
      self.set('time', self.get('time') + 1); 
      console.log(self.get('time')); 
     }, 1000); 
    }, 
    stop: function() { 
     window.clearInterval(this.timer); 
     this.set('running', false); 
     this.set('time', 0); 
    } 
});