使用instafeedjs和moment.js呈现instagram提要,并将日期格式化为相对格式(X天/月/小时/分钟前)。
如下面所示,成功函数回调通过数组循环,将图像分离到唯一的DOM容器中。这个部分工作得很好,尽管现在我需要获得‘caption.creed_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>
发布于 2015-07-22 23:52:49
在将html插入dom之后,我在成功回调中使用了moment.js来解决这个问题。从插入到模板段落中的数据属性ive获得hte时间戳。
就像一种魅力!
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();https://stackoverflow.com/questions/31548914
复制相似问题