0

私は Ember の学習の初期段階にあり、不可解なことに遭遇しました。2 つのコントローラー間で通信を行い、対応するビューも更新しようとしています。

単純化したバージョンでは、ボタンをクリックして 1 つのコントローラーでイベントを発生させ、別のコントローラーでタイマーを開始したいと考えています。これは機能しますが、値が変更されたときにタイマーのビューが更新されません。

ここに私が持っているものがあります:

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 で開始アクションを直接呼び出すと、ビューが正しく更新されます。

ありがとう！

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 に答える