2015-07-21 32 views
0

使用instafeedjs和moment.js呈现instagram馈送并将日期格式化为相对格式(X天/月/小时/分钟前)。Instafeedjs moment.js返回时间

正如您在下面看到的,成功函数回调循环通过数组将图像分隔成独特的DOM容器。这部分工作完美,但是,现在我需要获取'caption.created_date',它也包含一些小技巧。我可以非常容易地输出unix时间戳,但似乎无法将其转换为上述所需的输出。

非常感谢你的帮助。

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>

回答

-1

伊夫插入HTML到DOM后立即解决了这个利用成功回调中moment.js。矩是从插入模板段落的数据属性中获取hte unix时间戳。

工程就像一个魅力!

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();