Integration of jquery-timeago in ember application

Timeago is a widely used jQuery plugin which makes it easy to support automatically updating timestamps. (ex: 2 minutes ago)

plugin documentation: http://timeago.yarp.com/(link)

Now we will see how to integrate timeago jquery plugin in ember application.

(Here we will give example using ember-cli)

install jquery-timeago plugin using bower

bower install jquery-timeago

In Brocfile.js

app.import('bower_components/jquery-timeago/jquery.timeago.js');

Create Ember Component to display time format

app/components/time-ago.js

import Ember from 'ember';

export default Ember.Component.extend({
  timeValue: new Date(),

  didInsertElement: function() {

    Ember.$().ready(function (){
      Ember.$('time.timeago').timeago();

      // update every minute
      setInterval((function() {
        return Ember.$("time.timeago").timeago();
      }), 60000);

    });
  },

  timeString: function(){
    var timeValue = this.timeValue || (new Date());
    var timeString = timeValue.toString();
    return (new Date(timeString).toISOString());
  }.property()

});

app/templates/components/time-ago.hbs

 Right Now 

Now use this component wherever you want to display dynamic timings in your template

{{time-ago timeValue=createdAt}}

That's it!!

Thanks.