Вы используете шаблоны JavaScript?
Этот урок связан с проектом Небольшое введение в использование плагина jQuery Template
Наверняка многие читатели знакомы с какой-нибудь серверной системой шаблонов, например, Smarty или Cheetah. Но есть шаблон, который выполняется на стороне клиента - плагин jQuery Template, созданный в недрах Microsoft. В современных условиях усложнения веб приложений его использование имеет ясный практический смысл.
Он позволяет легко строить структуру содержания без трудного и путающего связывания строк. Например, есть набор данных, в которых содержится ID и имя. Нужно вывести имя как ссылку.
Задачу можно решить так:
var clRec = ""; for(var i=0; i<client.name.length; i++) { clRec += "<li><a href='clients/"+client.id[i]+"'>" + client.name[i] + "</a></li>"; }
Но более наглядное решение выглядит вот так:
<li><a href="/clients/${id}">${name}</a></li>
Второй вариант кода является шаблоном для построения списка ссылок имен. Чтобы использовать такой вариант, надо сначала включить в текст страницы jQuery и плагин jQuery Template:
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> <script src="/jquery.tmpl.js" type="text/javascript"></script>
Затем определяем данные, которые будут выводиться. Это может быть результат запроса к базе данных или предопределенный массив, например:
var clientData = [ { name: "Rey Bango", id: 1 }, { name: "Mark Goldberg", id: 2 }, { name: "Jen Statford", id: 3 } ];
А затем определяем шаблон:
<script id="clientTemplate" type="text/html"> <li><a href="/clients/${id}">${name}</a></li> </script>
Тег script
необходим. Он используется для встраивания шаблона в текст страницы. Обратите внимание, что используются заменители ${id}
и ${name}
с теми же именами, которые определены для идентификаторов в наборе данных. Структура “${}” сообщает парсеру шаблона, что поля необходимо заменить на соответствующее значение.
Остается вызвать плагин jQuery Template для формирования кода страницы из шаблона:
$("#clientTemplate").tmpl(clientData).appendTo( "ul" );
Метод .tmpl() получит определенные нами данные и проведет анализ выбранного шаблона. Затем метод jQuery .appendTo() результат к тегу неупорядоченного списка. В результате работы будет выведена структура:
Все достаточно просто.
А в целом код нашей страницы будет выглядеть так:
<!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="robots" content="noindex" /> <title>Тест шаблона</title> <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> <script src="/jquery.tmpl.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { var clientData = [ { name: "Rey Bango", id: 1 }, { name: "Mark Goldberg", id: 2 }, { name: "Jen Statford", id: 3 } ]; $("#clientTemplate").tmpl(clientData).appendTo( "ul" ); }); </script> <script id="clientTemplate" type="text/html"> <li><a href="/clients/${id}">${name}</a></li> </script> </head> <body> <ul></ul> </body> </html>
В результатае применения шаблона получается код, который легче поддерживать из-за его очевидности.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/wgRhlc5l1Nw/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Если ты рождён без крыльев, не мешай им расти. (Коко Шанель / ЖИТЕЙСКАЯ МУДРОСТЬ ) |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.