Как отловить событие построения html по шаблону handlebars?

Аяксом загружаю с сервера определенный набор данных, далее по этим данным строю html по шаблону handlebars и отображаю пользователю:

$.ajax({
        type: 'GET',
        url: url,
        dataType: 'json',
        success: function(msg){
                var src   = $("#cards-templ").html();
                var templ = Handlebars.compile(src);
                var html = templ(msg.data);
                $('.cards').html(html);
        },
        error: function(msg){
            if (debug) console.log('Error: ', msg);
        }
    });


<div class="cards">
            <script id="cards-templ" type="text/x-handlebars-template">
                    {{#each cards}}
                    <div class="item">
                        <img src="{{image}}" alt="{{name}}">
                    </div>
                    {{/each}}
            </script>
        </div>


Вопрос: как поймать событие, когда контент будет отрисован и вставлен в .cards, чтобы можно было применять над ним другие фичи, типа слайдеров и пр?

Логичный вариант, что handlebars тут вообще непричем и ловить надо некое событие обновления .cards, только не пойму, как это сделать?
Искал возможные обработчики для .html(), но ничего не нашел.

Спасибо!
  • Вопрос задан
  • 2354 просмотра
Решения вопроса 1
alt3rmann
@alt3rmann Автор вопроса
Вроде нашел решение:

Переопределяем функцию jQuery .html():

(function ($) {
    // create a reference to the old `.html()` function
    var htmlOriginal = $.fn.html;

    // redefine the `.html()` function to accept a callback
    $.fn.html = function(html,callback){
        // run the old `.html()` function with the first parameter
        var ret = htmlOriginal.apply(this, arguments);
        // run the callback (if it is defined)
        if(typeof callback == "function"){
            callback();
        }
        // make sure chaining is not broken
        return ret;
    }
})(jQuery);


А теперь немного меняем добавление контента и ставим обработчик:

$('.cards').html(html, function(){
                    console.log("Данные успешно загружены и отображены");

                });


owlCarousel и другие скрипты отрабатывают нормально.

Аналогично можно делать и прелоадеры на загрузку подобного контента.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы