Instafeedjs moment.js返回时间之前

Question

Using instafeedjs and moment.js to render instagram feed and format the dates to a relative format ( X days/months/hours/minutes ago ).

As you see below, the success function callback is looping thru the array to separate the images into unique DOM containers. This portion works perfect, although, now that I need to obtain the 'caption.created_date', it gets a little tricky to also include. I can output the unix timestamp pretty easily but I can't seem to translate it to the desired output, described above.

thank you so much for help.

 var imgs = []; var feed = new Instafeed({ limit: '12', get: 'user', userId: XXXXX, clientId: 'XXXXXXXXXXXXXXXXXXXX', accessToken: 'XXXXX.XXXXX.XXXXX', limit: 20, resolution: 'standard_resolution', template: '{{model.created_time_ago}}<img src="{{image}}"/>', filter: function (image) { var imageDate = new Date(parseInt(image.created_time * 1000, 10)); var timeAgo = moment(imageDate).fromNow(); image.create_time_ago = timeAgo; return true; }, success: function (data) { // read the feed data and create owr own data struture. var images = data.data; var result; for (i = 0; i < images.length; i++) { var image = images[i]; result = this._makeTemplate(this.options.template, { model: image, id: image.id, link: image.link, caption: image.caption.text, created_time:image.caption.created_time, image: image.images[this.options.resolution].url }); imgs.push(result); } //split the feed into divs $("#gram1").html(imgs.slice(0, 1)); $("#gram2").html(imgs.slice(1, 2)); $("#gram3").html(imgs.slice(2, 3)); } }); feed.run(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="http://instafeedjs.com/js/instafeed.min.js"></script> <div id="gram1"></div> <div id="gram2"></div> <div id="gram3"></div> 

Answer 1

Ive solved this by using moment.js within the success callback right after inserting the html into the dom. Moment is obtaining hte unix timestamp from the data attribute ive inserted into the templates paragraph.

works like a charm!

var imgs = [];
var feed = new Instafeed({
    limit: '12',
    get: 'user',
    userId: 1934632453,
    clientId: 'b4986d7624834f60a58c773bd4ccc5f3',
    accessToken: '1934632453.467ede5.c8d670901ebe4229b293c9ff705810d3',
    limit: 20,
    resolution: 'standard_resolution',
    template: '<p data-unix="{{created_time}}" class="unix-time"></p><img src="{{image}}"/>',
    success: function (data) {
        // read the feed data and create our own data struture.
        var images = data.data;
        var result;
        for (i = 0; i < images.length; i++) {
            var image = images[i];
            result = this._makeTemplate(this.options.template, {
                model:       image,
                id:          image.id,
                link:        image.link,
                caption:     image.caption.text,
                created_time:image.created_time,
                image: image.images[this.options.resolution].url
            });
            imgs.push(result);
        }
        //split the feed into divs
        $("#gram1").html(imgs.slice(0, 1));
        $("#gram2").html(imgs.slice(1, 2));
        $("#gram3").html(imgs.slice(2, 3));

        //convert time to relative time ago.
        $(".unix-time").each(function(){
            var time = moment.unix($(this).attr('data-unix')).fromNow();
            $(this).append(time);
        });
    }
});
feed.run();