Создание сайта на Битрикс — #22 — Как пользоваться JS библиотекой Битрикс BX

Автор Maksim Inshakov
Создание сайта на Битрикс — #22 — Как пользоваться JS библиотекой Битрикс BX

Здравствуйте.

Меня зовут. Александр Дюмин я разработчик сайтов на. Битрикс вы смотрите 22 урок разработки сайта на.

Битрикс с нуля для начинающих программистов верстальщиков дизайнеров и проверка на прошлом уроке мы рассмотрели, что такое Get File array и применение на практике.

Сегодня мы перейдем к следующему блоку — это JavaScript аптека для. Битрикс — это библиотека хороша тем, что она сразу же подключена в битриксе позволяет значительно сократить время разработки сайтов связанные с JavaScript Ami мы рассмотрим по порядку два метода BX Ready и BX ajax insert not задача загрузить на страницу данные при клике на кнопку данные будут представлять из себя статей. Так давайте перейдем к нашему сайту вот у нас раздел. Услуги и сюда вот в этот блок. Давайте загрузим статьи из раздела статьи при клике на кнопку для этого переходим сперва в раздел. Услуги так вот наш раздел здесь у нас включаемая область так она находится в. Ильинке Давайте напишем. Последняя статья как текст нам не нужен его просто убираем всегда описываем Def так класс братан загрузить статьи назовём кнопку так кнопку назвал теперь нам необходимо понимать. Откуда мы будем загружать статьи статьи мы будем загружать используя ayaks вот чтобы загружать статьи. Откуда бы. Ну, а кто бы то ни было нам необходимо сперва создать файл для этого. Откуда мы будем загружать соответствие идём в корень сайта создаем новую директорию называем её ayaks например в ней создаем файл HP назовем его статьи статья в этот файл добавим кот. Я уже заранее приготовил. Вот — это базовый код который необходим для того чтобы ayaks запрос работал с ядром. Битрикс вот пятой строчке ядро. Битрикс подключается 2 3 строчки необходимы для того чтобы не записывать статистику по данному событию. То есть когда обращаются к чтобы статистика не записывалась и не проверять разрешение если разрешение. У пользователя на получение этих данных дальше идёт проверка сессии. Битрикс А я её оставил пока на начальном этапе. Давайте её комментируем вообще проверку делать необходимо дальше restartbuffer — это значит, что в буфере. Как рисуется HTML страница которая создается. То есть я данные которые у вас создаются там header Footer PHP шаблон и сама страница она попадает в буфер вот так как мы. Обращаемся к странице ayaks нам надо учить чистые данные без хиджаба без футляра без. Ничего соответственно выше обновить буфер команда restartbuffer она буфер очищает далее мы указываем заголовок страницы — это тоже один из важных. Дмитров какой тип данных мы. Передаем в этой странице сейчас мы будем передавать HTML данные. Ну и какой. Какая кодировка используется Unicode. Пусть проставляется автоматически из битрикса так на странице тест я сделал список новостей компонент уже подключил вот так как действие неоднократно делали то решил их не ролики. Вот сам компонент. Я беру просто код этого компонента его ayaks. Вставляю Вот получается с таким вот образом здесь мы можем нас работу компонента ну его параметры и желательно его настроить на отдельной странице то есть, а в ayaks уже загружать готовое всё сохраняем так вот этот. Файлик статьи его можно открыть и он должен по идее точно также отработать вот если посмотреть, что я мокод мы видим, что нет никаких дополнительных данных у нас чистый код мы получаем теперь нам необходимо подготовить JavaScript который будет данные с этой загружать вот в этот блок так переходим вот сюда. Можем написать JavaScript здесь на данный момент чтобы было всё в в одном месте. Иван было понятнее где редактировать. А в действительности на будущее лучше на Code JavaScript распределять если относится к конкретному компонент — это прописывать File JavaScript component. А если вот как сейчас — это ayaks и не относится конкретно компоненту то в шаблоне на создать вот здесь фалик script.js. Ну давайте так и сделаем принципе так JS Script. Вот моя вы создали и теперь он должен подключиться давайте — это проверим есть специальная команда консоль. Лог пишем Market, что делает эта команда вот здесь в консоли она должна вывести OK. Она просто вот эту информацию которая находится вот здесь так обновляю страницу сейчас один момент. Всё правильно. Каждый должен так странно почему не подключилось ничего страшного подключаем, тогда JavaScript вот зря для того чтобы подключить JavaScript здесь мы можем его прописать вот так вот я. Вам можем прописать с помощью битрикса есть функция Add Head Script вот данная функция позволяет добавлять JavaScript на странице здесь вот примеры прописывать так смотрю всё. О'кей у нас прописался очень важно тестировать JavaScript чательно то есть буквально каждый этап который вы новый совершали совершаете чтобы он потому, что бывает написал кот и уже непонятно где сейчас происходит так далее. Я в подключили здесь у нас OK теперь нам необходимо сделать следующее мы начинаем использовать первых. Вот — это BX ready. Давайте посмотрим как оно работает вот она здесь описано мы можем прямо взять скопировать. Вот — это кусок взяли скопировали встали и очищаем нужно оставить только вот эту часть смотрите суть этой функции в следующем, что она запускает Java скрипты только после того как страница полностью загружена. Когда ваша дом-дерево готова к записи данных по идее сейчас когда обновляю страницу. У меня должно быть завтра появится потом. О'кей 2 почему так произошло. Хотя Ну раньше OK 2 находится потому, что сперва выполняются кот который сразу же прописан JavaScript его читает и выполняет. А после того. А вот эта функция, только после того как.

0 комментариев
0

Читайте также