CODEWITHSUNDEEP
ember.js
user191766
user191766

Reputation:

Re-compute an Ember object's property every interval

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

Answers (1)

nrion
nrion

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

Related Questions