bitrix ajax componentTemplate js canjs controller

(function ($) {
    App.Widgets.<contextname> = App.Widgets.<contextname> || {};

    App.Widgets.<contextname>.<blockname> = can.Control.extend(
        {
            pluginName: '<pluginName>',
            defaults: {}
        },
        {
            // init выполняется всегда после загрузки страницы
            init: function () {

                // определяем ключ доступа к компоненту по ajax
                this.ajaxKey = this.element.find('.js-template-name-ajax-key').val();

                // запускаем наш ajax пейджер
                this.initAjaxPagen();

            },

            initAjaxPagen: function () {
                // наш блок, с кнопкой, находится внутри блока с элементами, мы будем заменять кнопку на элементы, полученные при ajax запросе
                this.navBlock = this.element.find('.js-template-name-show-more');
                // наша кнопка "Показать ещё"
                this.pagen = this.element.find('.js-template-name-nav-ajax');
                // строим ссылку для запроса следующего набора элементов
                this.pagenGateway = this.buildPagenGatewayPath();
                // вешаем обработчик события на клик по кнопке
                this.on(this.pagen, 'click', 'showMoreEventStart');
            },

            buildPagenGatewayPath : function() {
                var uri = new URI();

                uri
                    .setSearch('AJAX', 'Y')
                    .setSearch('KEY', this.ajaxKey)
                    .setSearch('PAGEN_'+this.pagen.attr('data-nav'), this.pagen.attr('data-page'))
                    .toString();
                return uri;

                // функция возвращает ссылку на страницу со следующим набором элементов и установленными ключами для доступа к компоненту по аякс
            },

            showMoreEventStart : function() {
                // обработчик клика по кнопке
                // выполняем какие-либо действия, происходящие во время ожидания загрузки, если требуется
                this.pagenLoadState();
                // стираем обработчик события на клик по кнопке
                this.pagen.off();
                // запрашиваем аякс, проксируем функцию, которая выполнится при получении ответа
                $.get( this.pagenGateway, this.proxy('onShowMoreGatewayResponse'));
            },

            pagenLoadState : function() {
                var pagen = this.pagen;
                // например, заменяем текст на кнопке "Показать ещё" на "Загрузка..."
                this.pagen.find('span').html('Загрузка...');
            },

            onShowMoreGatewayResponse: function(data, status, xhqrObj) {
                // При получении ajax заменяем блок с нашей кнопкой на html ответа. Логично, если блок с кнопкой находится в одном родителе с текущим списком элементов на странице, то полученные элементы просто добавятся в конец списка. Так же, если в ответе будет новая кнопка на следующую страницу, то она вновь добавится в конец.
                this.navBlock.replaceWith(data);
                // Если в php шаблоне была конструкция для цикла элементов, для их классов <?if($isAjaxRequest):?>template-name-item--ajax<?endif;?>, то есть для запрошенных по аякс элементов добавляется модификатор класса --ajax, и правила стилей указывают, что элементы этого класса с таким модификатором скрыты (css>display:hide), то по окончании их загрузки они появятся с анимацией.
                this.element.find('.template-name-item--ajax').slideDown(330);
                // по окончании загрузки заново запускаем наш ajax пейджер, он будет готов к работе со следующей страницей, если в текущем ответе пришла новая кнопка "Показать ещё"
                this.initAjaxPagen();
            },

        }
    );
}(jQuery));