Вие използвате JavaScript шаблони

Със сигурност много читатели са запознати с някои системи за шаблони от страна на сървъра, като Smarty или Cheetah. Но има шаблон, който работи от страна на клиента - плъгинът jQuery Template, създаден в недрата на Microsoft. В съвременните условия на усложняване на уеб приложенията използването му има ясен практически смисъл.

Тя ви позволява лесно да структурирате съдържанието си без трудно и объркващо свързване на низове. Например, има набор от данни, който съдържа ID и име. Трябва да покажете името като връзка.

Проблемът може да се реши така:

Но по-визуално решение изглежда така:

Втората версия на кода е шаблон за изграждане на списък с имена на връзки. За да използвате тази опция, първо трябва да включите jQuery и плъгина за jQuery Template в текста на страницата:

След това определяме данните, които ще се показват. Това може да е резултат от заявка към база данни или предварително дефиниран масив, като така:

След това дефинираме шаблона:

Тагът на скрипта е задължителен. Използва се за вграждане на шаблона в текста на страницата. Обърнете внимание, че контейнерите $ и $ се използват със същите имена, както са дефинирани за идентификаторите в набора от данни. Структура “ $<> ” казва на анализатора на шаблона да замени полетата с подходящата стойност.

Остава да извикате плъгина за jQuery Template, за да генерирате кода на страницата от шаблона:

Методът .tmpl() ще получи дефинираните от нас данни и ще анализира избрания шаблон. След това методът jQuery .appendTo() връща резултата в тага на неподредения списък. В резултат на работата ще се покаже структурата:

използвате

Всичко е съвсем просто.

Като цяло кодът на нашата страница ще изглежда така:

Резултатът от прилагането на шаблон е код, който е по-лесен за поддръжка поради своята очевидност.

5 последни урока от рубриката "jQuery"

jQuery анимация за писане

Днес бихме искали да ви разкажем за библиотеката TypeIt, безплатен плъгин за jQuery. С негова помощ можете да симулирате писане. Ако всичко е настроено правилно, можете да постигнете много реалистичен ефект.

Хронология с jQuery

jQuery плъгин за времева линия.

Начертайте диаграма на Гант

jQuery плъгин за диаграма на Гант.

AJAX и PHP: Качване на файл

Пример за това как да качите файл с помощта на PHP и jQuery ajax.