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/

更新：

忘了提一下，如果你打开控制台，你可以看到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);
    }
});

Ember.js - 在控制器和他们的视图之间进行通信

1 个答案: