Javascript - Использование функции timeago с автозаполнением Algolia

Question

Я пытаюсь использовать функцию timeAgo из этих example. Я положил его в файл, и я зову его, на мой взгляд, как это:

<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 добавляет html-код долгое время после того, как DOM готов, поэтому код 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'); 
    }); 

Это решение может привести ко многим instanses из timeAgo яваскрипта таймаутов.Зафиксируйте его глобальным timeAgoTimeout = setTimeout(timeAgo, 60000); и clearTimeout(timeAgoTimeout) до времениAgo.

Пример, который работает с динамическими элементами вы можете найти в скрипке - http://jsfiddle.net/mge45ugr/

Answer 2

Вы должны инициализировать timeago снова на вашем

<abbr class="timeago"> 

после автозавершения, потому что он был создан после загрузки страницы. Функция JQuery «onload» не работает с hjml-кодом, созданным ajax.

Answer 3

В вашем example обратите внимание, что функция, которая активирует изменения DOM, находится на таймере. Он работает каждые 60 секунд, а это означает, что все элементы timeago обновляются каждые 60 секунд.

В вашем случае вы, вероятно, звоните timeago только один раз, когда страница загружается. Когда Algolia работает, он генерирует новые элементы DOM (в соответствии с вашим шаблоном), который включает в себя элементы класса timeago. Но когда эти новые элементы визуализируются, действие timeago уже завершено и не работает снова.

Вы в основном должны сказать, что функция timeago запускается снова, чтобы она могла трансформировать эти новые элементы timeago. Вы можете поместить эту функцию на таймер, например, в ваш пример, или вы можете вызвать функцию после того, как ваш шаблон завершил рендеринг в DOM. Я не могу сказать, как вызвать его после того, как элементы будут отображаться в вашем приложении, потому что я не вижу достаточного количества вашего кода. Но если вы хотите поставить его на таймере, это что-то вроде этого:

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

Вот модифицированная скрипка, которую я создал на основе вашего примера.

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

Он моделирует основную идею того, что вы пытаетесь сделать. Таймер запускается каждые 10 секунд. Через 5 секунд после загрузки страницы я вставляю текст в DOM (с class=timeago). Когда таймер начнет через 5 секунд после этого, текст будет правильно преобразован.

В вашем случае вам потребуется либо настроить настройки таймера, либо лучшее решение для запуска исполнительного механизма timeago для выполнения после того, как ваши элементы были переданы в DOM.