我正在尝试从这些example使用timeAgo函数。我将其放在文件中,并在我的 View 中这样称呼它:
<script src="{{ asset('js/landing-page/jquery.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/landing-page/bootstrap.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/landing-page/material.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.0/js/swiper.min.js"></script>
<script type="text/javascript" src="{{ asset('js/slider.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/timeago.js') }}"></script>
<!-- Include AlgoliaSearch JS Client and autocomplete.js library -->
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>
<script type="text/javascript" src="{{ asset('js/autocomplete.js') }}"></script>
<!-- Control Center for Material Kit: activating the ripples, parallax effects, scripts from the example pages etc -->
<script src="{{ asset('js/landing-page/material-kit.js') }}" type="text/javascript"></script>
Algolia自动完成模板的部分脚本如下所示:
{
source: autocomplete.sources.hits(videos, { hitsPerPage: 5 }),
displayKey: 'title',
templates: {
header: '<div class="aa-suggestions-category">Videos</div>',
suggestion: function(suggestion) {
return '<span>'
+ '<a href="/player/' + suggestion.id + '">'
+ '<div class="media">'
+ '<div class="media-left">'
+ '<img class="media-object" src="https://s3.eu-central-1.amazonaws.com/myUrl/' + suggestion.video_id + '_1.jpg">'
+ '</div>'
+ '<div class="media-body">'
+ '<p>' + suggestion._highlightResult.title.value + '<small><abbr class="timeago" title="' + suggestion.created_at + '">' + suggestion.created_at + '</abbr></small>' + '</p>'
+ '<small> ' + '</small>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</span>';
}
但是时间戳仍然可见,而不是时间之前。控制台中未显示任何错误。我究竟做错了什么?
最佳答案
在DOM准备好很长时间之后,自动完成功能会添加html代码,因此当仍然没有任何自动完成功能代码时,将执行timeago.js
代码。
使用timeAgo
事件渲染新代码的之后,您必须立即调用autocomplete:updated
函数,而不是等待60或10秒。//attach custom event handler - autocomplete:updated triggers when dataset is rendered
autocomplete('#search-input', { hint: false }, [
{
source: ...,
displayKey: ...,
templates: {
suggestion: function(suggestion) {
...
}
}
}
]).on('autocomplete:updated', function(event, suggestion, dataset) {
timeAgo('.timeago');
});
此解决方案可能导致timeAgo
JavaScript超时的许多实例。在timeAgo之前使用全局timeAgoTimeout = setTimeout(timeAgo, 60000);
和clearTimeout(timeAgoTimeout)
对其进行修复。
可在小提琴中找到的与动态元素一起使用的示例-http://jsfiddle.net/mge45ugr/
关于javascript - Javascript-将timeago函数与Algolia自动完成功能一起使用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41965003/