Reputation:
Currently I have a very simple Ember Object, which has two properties: startedAt
and endedAt
.
Based on these properties, I have computed property isLive
. Which does a time comparison with the current time.
When rendering a handlebar template I highlight certain items by adding a class highlight
.
<li {{ bindAttr class="event.isLive:highlight" }}>...</li>
I'd like to update this template every 5 seconds or so, so I know isLive
needs to be re-calculated. How would I need to go about that?
App.Event = Ember.Object.extend({
endedAt: null,
startedAt: null,
isLive: function() {
if (!this.get('startedAt') || !this.get('endedAt')) {
return false;
}
var now = moment();
return (now.diff(moment(this.get('startedAt'))) >= 0 &&
now.diff(moment(this.get('endedAt'))) < 0);
}.property('startedAt', 'endedAt')
});
I have done something similar for a regular Ember View {{view App.TimerView}}
.
App.TimerView = Ember.View.extend({
tagName: 'time',
template: Ember.Handlebars.compile('{{ view.now }}'),
init: function() {
this._super();
this.set('now', moment().format('HH:mm:ss'));
},
now: null,
willInsertElement: function(evt) {
var self = this;
var intervalId = setInterval(
function() {
self.set('now', moment().format('HH:mm:ss'));
}, 1000);
this.set('interval', intervalId);
},
willDestroyElement: function(evt) {
clearInterval(this.get('interval'));
}
});
But I can't seem to apply the same logic for a regular object. Could someone point me in the right direction please.
I believe I'd need to do this in the controller according to these guides.
Upvotes: 1
Views: 2062
Reputation: 248
I've used the solution presented here: http://livsey.org/blog/2013/02/20/tick-tock/
to continuously check on the passage of time vs a timestamp.
You create the clock object and the initializer as described in the post, and create your isLive property:
.property("startedAt", "endedAt", "clock.minute") });
Using clock.minute will fire an update every minute. You could use clock.second if it was time sensitive (or to speed up development.
Upvotes: 6