0

我只是在学习 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 操作会正确更新视图。

谢谢！

4

1 回答 1

3

您使用的是旧版本的 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);
    }
});
于 2013-05-10T07:06:07.423 回答