Question

How do you apply timeago or easydate on <time class="prettydate"><%= created_at %></time>" (which outputs something like this Mon Jun 18 03:46:27 +0000 2012)?

I tried the below but it doesn’t work because I am using Backbone / Underscore to render the date.

$(function() {
  $('time.prettydate').easydate();
});

Here is my view:

( function ( views ){

    views.ResultView = Backbone.View.extend({
        tagName : 'li',
        template: _.template($('#resultItemTemplate').html()),

        initialize: function() {
            this.model.bind('change', this.render, this);
            this.model.bind('destroy', this.remove, this);
        },

        render : function () {
            //this.$el.html(this.template(this.model.toJSON()));
            var html = this.template(this.model.toJSON());
            this.$el.html($(html).timeago());
        }
    });

})( app.views );

Answer 1

Presumably you have something like this in a view:

render: function() {
    var html = _.template(...);
    this.$el.append(html);
    return this;
}

All you need to do is apply the plugin straight to html while you’re appending it:

render: function() {
    var html = _.template(...);
    this.$el.append($(html).timeago());
    return this;
}

Demo: http://jsfiddle.net/ambiguous/Fk6xF/

This works equally well if you’re doing this.$el.html(...).

If the pieces that you need to apply timeago to are inside your template, then you’ll have to hunt them down and apply .timeago() to the individually. Something like this should do the trick:

render: function() {
    var html = _.template(...);
    this.$el.html(html);
    this.$el.find('.timeago').timeago(); // Assuming you're using class="timeago"
    return this;
}

Demo: http://jsfiddle.net/ambiguous/dHr6D/