templates - Ember.js - Communicating between controllers and their views -
i'm in stages of learning ember, , have run puzzling. i'm trying communicate between 2 controllers , have corresponding views update well.
in simplified version, i'd click button fire event on 1 controller, starts timer on controller. works, view of timer not being updated when value changes.
here's have:
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); } });
and templates:
<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>
update:
forgot mention if open console, can see time being updated inside of timecontroller function, it's not showing in view.
also, calling start action on timercontroller directly correctly updates view.
thanks!
you using out-of-date version of ember. i've updated fiddle ember rc3. i've replaced instances of container.lookup
correct methods. container
pretty private object.
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); } });
Comments
Post a Comment