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上調用start操作可以正確更新視圖。

謝謝！

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