Javascript --在Algolia autocomplete中使用timeago函数

Question

我正在尝试从这些timeAgo函数中使用示例函数。我把它放在一个文件里，在我看来，我是这样称呼它的：

<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>';
        }

但是时间戳仍然是可见的，而不是时间。控制台中没有显示错误。我做错了什么？

Answer 1

Autocomplete在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超时的许多实例。用全局timeAgoTimeout = setTimeout(timeAgo, 60000);和clearTimeout(timeAgoTimeout)修复它，然后再使用timeAgo。

使用在http://jsfiddle.net/mge45ugr/中可以找到的动态元素的示例。

Answer 2

您需要在您的

<abbr class="timeago">

在自动完成之后，因为它是在页面加载后生成的。Jquery "onload“函数不适用于ajax生成的html代码。

Answer 3

在您的示例中，注意驱动DOM更改的函数在计时器上。它每60秒运行一次，这意味着每60秒刷新一次所有timeago元素。

在您的示例中，可能只在页面加载时调用timeago一次。当Algolia运行时，它会生成新的DOM元素(根据模板)，其中包含带有timeago类的元素。但是，当呈现这些新元素时，时间前驱动已经完成，并且不再运行。

基本上，您需要告诉timeago函数再次运行，这样它就可以转换这些新的timeago元素。您可以将该函数放在计时器上，就像您的示例一样，也可以在模板在DOM中完成呈现之后触发该函数。在应用程序中呈现元素之后，我无法告诉您如何触发它，因为我看不到足够的代码。但是如果你想把它放在计时器上，它是这样的：

// update time every 10 seconds
setTimeout(timeAgo, 10000);

下面是我根据您的示例创建的修改小提琴。

http://jsfiddle.net/mspinks/hkvjkbd0/2/

它模拟了你想要做的事情的基本想法。定时器设置为每10秒运行一次。在页面加载5秒后，我将一些文本注入DOM (使用class=timeago)。当计时器在那之后的5秒内启动时，文本就会被正确地转换。

在您的示例中，您要么需要调整计时器设置，要么，更好的解决方案是在元素被呈现到DOM之后触发timeago执行器来执行。