За да се избегнат недоразумения, искам да предупредя, че модулът не е сред най-активно развити или подкрепени в настоящия момент, както и разработчиците на екип JQuery не препоръчваме използването му. Това не означава, че не трябва да го използвам, но че е мой дълг е да ви разкажа за това, преди да го включи в своите проекти. Ще се радвам да ви препоръча някои други активно разработен вариант, но подмяната JQuery шаблони за мен, докато не е било възможно да се намери най-малко в близост до техните възможности. Но дори и по отношение на му каза разработчиците, тази секция е все още най-добрият.
История JQuery шаблони модул е по-скоро необичайно. По това време, Microsoft и JQuery развойния екип съобщи, че три приставки, разработени от Microsoft, като се има предвид състоянието на "длъжностно лице", което преди не е получила от плъгините.
След известно време екип JQuery обяви отхвърлянето на използването на тези модули и лишаването от служебното си положение, както и плановете си за замяната им с други функции. Очаквано замяна трябваше да се присъедини към JQuery UI библиотеката. Жалко е, но е истина, че никой от това, което е обещал, все още не е даденост и отхвърли плъгини все още са достъпни и се използват широко (особено по отношение на плъгини за работа с шаблони).
Очевидно е, че решението за това дали да използвате кода, чието използване не се препоръчва, всеки прави своя собствена, но аз лично харесвам функционалността, предоставена от шаблона, и аз често го използвам. В този случай, предполагам, че мога да по всяко време да погледнете изходния код и да елиминира всеки сериозен проблем, ако това се случи, и че понякога все още трябва да намерят методи за справяне за преодоляване на малки трудности, изплаща обезщетенията, предоставени от използването на шаблони ,
Създаване на JQuery шаблони библиотека
Преди да използвате JQuery шаблони, трябва да изтеглите JQuery шаблони библиотеката и го свържете към вашия документ.
Разопаковайте архива и копирайте jQuery.tmpl.js на файла (развитие версия) или jQuery.tmpl.min.js (версия за разполагане) на уеб сървъра. Следващото нещо, което трябва да направите - Добавяне на проба скрипт елемент на документа, свързан библиотека от шаблони, както е показано в примера по-долу:
Ние ще използваме този код като документ на пробата в тази статия. Вероятно сте забелязали, че оригиналната версия описано по-горе, това е не само фактът, че тя добавя библиотека с шаблони, но също така, че той да бъде отстранен от елементите, отговарящи на различни видове производство цвете. Това се прави умишлено, за да се даде възможност на нас, за да се възстановят тези елементи в документ, по различни начини с помощта на библиотеката шаблони.
Външният вид на оригиналния документ в браузъра на този етап е представен по-долу:
Прост пример за модел за данни
Най-добрият начин да се научат тези модели - веднага се залавяме за работа. Ние използваме кода от примера по-долу, за демонстрация на основните функции на шаблона:
В следващите раздели ще разделяне на пробата на отделни части и анализира кода на всеки един от тях поотделно. Когато данните са част от документа, те се наричат вградени данни (данни вградени). Алтернативата е отдалечена данни (отдалечени данни). съхранява на сървър отделно от документа. Ще разгледаме дистанционно данни по-късно, но за сега може да се види, че този въпрос е тясно свързан с подкрепата на Аякс, която осигурява JQuery библиотеката.
Дефиниране на данни
Примерът започва с определяне на данни. В този случай, данните - масив от обекти, всеки от които описва отделен вид производство цвете. Съответният код фрагмент е показано по-долу:
В този пример, масивът се състои от шест обекти, всяка от които има редица свойства, които описват даден продукт: Име на дисплей, име на продукт, броя на дяловете на разположение и на цената.
шаблон дефиниция
Както вероятно сте се досетили, и, централен елемент на библиотеката шаблон е модел за данни (данни шаблон). Това е набор от HTML-елементи, които съдържат заместители, които съответстват на различните свойства на тези обекти. Шаблонът за този пример е показано по-долу:
Първото нещо, което трябва да се обърне внимание - това е, което шаблонът се поставя в сценария елемент, атрибут е зададен като несъществуваща тип - текст / х-JQuery-TMPL. Това се прави, така че браузърът не се опитва да интерпретира съдържанието на този шаблон като обикновен HTML-маркиране. Въпреки че не е от съществено значение, но такива практики трябва да се спазват, тъй като това е изключително полезно и ще ви позволи да се избегнат много потенциални проблеми в бъдеще.
Вторият въпрос, на който искам да привлека вниманието ви - е, че за да зададете име на шаблона е посочено в точка от скрипт, използвайте атрибут за идентификатор. В този случай, името на модела е flowerTmpl. За да кандидатствате за шаблона на данни, трябва да знаете името му.
По време на обработката на шаблон вместо всеки пълнител заместен стойност собственост взети от текущия обект. Например, за обекти заместителите на първия масив $ продукти свойства ще заменят стойност, т.е. "Астор". По този начин, част от моделасе превръща в следния HTML-фрагмент:
Заместващите стойности - не е единственото нещо, което може да направи шаблони. Останалите им възможности са разгледани по-долу.
шаблон за кандидатстване
За да се присъедините метода на шаблонни данни използва TMPL (). В този случай, вие определяте данните, които се използват, и приложите шаблона. Един пример за използване на този метод е показано по-долу:
Тук ние избираме покупка с шаблона, използвайки за тази цел от $ (), и призовават за метода на резултат TMPL (), да се разпространява като аргумент за данните, които искаме да обработим.
TMPL () метод връща стандартен JQuery обект, който съдържа елементи, получени от шаблона. В този случай това води до набор от елементи DIV, всяка от които съдържа елементи, IMG, етикет и вход, конфигурирани за един от обектите, които се съдържат в масива от данни. За да вмъкнете целия набор в метод appendTo () се използва като дете елемент в ROW1 елемент. Резултатът е показан по-долу:
модификация на резултата
Този резултат не е съвсем ни устройва, защото всички елементи, съответстващи на различни цветове са показани в един ред. Но тъй като ние се занимаваме с обекта JQuery, да организира елементите, тъй като ние не бива да бъде твърде трудно. Примерът по-долу показва как това може да стане чрез въздействие върху резултата от TMPL на метод ():
В този пример, частта () и край (), използван за стесняване и разширяване на набор от избрани елементи и метод appendTo () - за добавяне на елементи подгрупи, генерирани с помощта на шаблон в различни редове.
Забележка: За да се върнете на снимачната площадка в първоначалното му състояние го бил преди парче за кандидатстване () и appendTo (), край () метод трябваше да се обадя два пъти подред. Нищо лошо в това, и аз съм готов да използва края на метод (), за извършване на необходимите действия в рамките на едно изявление, но края на поредица (). Край () не ме предизвика радост. В случаи като този предпочитам да прекъсне цялата последователност на действията на редица отделни операции, както е показано в примера по-долу:
И в двата случая резултатът ще бъде един и същ: представителството на съвкупността от продукти на два реда, всеки от които е, показани на трите вида цветове, както е показано по-долу:
Промяна на начина на въвеждане на данни
Друг възможен подход е да се промени пренос на данни метод процес TMPL на (). Съответен пример е показано по-долу:
В този сценарий, разпределението на елементи по редовете се извършва с помощта на шаблон двойно - веднъж за всеки ред. Съответната част от данните възражение всеки път модел се прехвърля с помощта на метод парче (). Въпреки разликата на този подход от предишния, ние получаваме същия резултат, който беше представен на фигурата по-горе.
Оценка израз
В този модел, стойността на входния елемент атрибут е зададена стойност на базата на stocklevel на пазарната стойност на имота, като се използва троен условно изявлението. Израз, оградена със скоби, играе същата роля, която ще играе записаните свойства вместо пряко значение. Ако стойността на stocklevel по-голяма от нула, като стойност се задава стойност 1, в противен случай - 0.
Вижте получил страница в прозореца на браузъра е показано на фигурата по-долу. Значение stocklevel, по-голяма от нула е настроен за всички цветове с изключение на пиони:
Този пример илюстрира основната схема на шаблона: данните се слива с шаблона за получаване DOM-обекти, които след това се добавят към документа използване JQuery основна функционалност. За създаването на съдържанието може да се използва директно като предварително определена стойност, и изчислява експресията.
Използване на променливи от шаблон
Контекстуални променливи от шаблон
$ Функцията () JQuery библиотека
Използването на $ данни
променлива $ Data връща текущия елемент данни, към който се прилага шаблона. Така например, се използва данните на променливите $ от своя страна ще се отнасят за всеки един от обектите, съответстващи на определени видове цветя. За да получите данните в предишния пример, третичния условен оператор е бил използван в шаблона. Този подход е напълно валидно, но често е трудно четенето на получения модел, който, разбира се, че е желателно да се избегне.
Този пример определя stockDisplay () връща стойността, която трябва да се появи във входната елемент. Аргументът на тази функция е информационен обект, който имаме в рамките на шаблона с помощта на променливи данни на $. Като се има предвид, че става дума само за един прост троен оператор в четливостта на кода, разликата в сравнение с предишната версия не е много висок, но в случай на по-сложни изрази, или в случай на повторна употреба на израза в рамките на един и същ шаблон, че ще бъде много по-забележими.
Дефинирайте функция, която ще се нарича от шаблона, да бъдат внимателни. Фактът, че тези функции трябва да бъдат определени преди да се обадите TMPL (). Винаги се опитвам да ги пуснат в края на скрипта на елемент, но ако функцията трябва да бъде готов събитието, определено трябва да се във вътрешността на водача да се уверите, че тя е била определена по-рано. Друга често срещана грешка е, че функцията често се определя в рамките на шаблона.
Използването на $ () в рамките на шаблона
Пълнителите, използвани в шаблона могат да използват функцията $ () JQuery библиотека, но това е много важно да се помни, че елементите, генерирани от шаблона, които не са свързани към документа, и затова няма да се разделят на групи от елементи избрани JQuery. Аз рядко използвам тази възможност, тъй като това е обикновено ме интересува повече от елементите и свързаните с тях данни, че произвеждат сами.
Използване на променлив елемент от $
В този пример, ние създаваме възможности обект, за който се определя на имота (отстъпка) и метод (stockDisplay ()). Тази задача се след това метод TMPL () предава като втори аргумент. Достъп до свойствата и методите на даден обект от шаблон осигурява променлив елемент $. Както можете да видите, за лечение на отстъпки в цената, тя използва отстъпка опции обект на собственост.
Искам да ви обърна внимание на необходимостта да се включи $ префикс в имената на променливите на контекстни: $ т и $ данни. Същият префикс се изисква и дръжка структура $ шаблон се използва за заместване на стойностите в шаблона. Пропускане на някоя от тези представки е един от най-често срещаните грешки.
За други приложения, този обект ще бъдат обсъдени по-късно.
Използването вложени шаблони
При създаването на сложни приложения понякога има смисъл да се раздели голям модел на някои части, обединението на който се провежда на етапа на изпълнение на заявката. Както ще бъде показано по-долу, този метод на комбиниране шаблони осигурява гъвкав контрол изход. Ще започнем с най-основните. Следният пример показва как един модел може да се отнася към друг:
В този пример, моделът е разделена на две части. Първият от тях, flowerTmpl модел призова за всеки елемент на данни от масива. От друга страна, този шаблон е шаблон за създаване на inputTmpl входни елементи. Обаждане на втория модел се извършва с помощта на дръжка>. Този разговор се използва три аргумента. Първите две - това е най-актуалните данни, както и на обекти опции; тези аргументи, които са затворени в скоби. Третият аргумент - това се нарича шаблон. Това може да се настрои или JQuery-селектор (както е направено по-горе), или променлива или функция е определено в сценария.
Условни шаблони
Механизмът за шаблон позволява динамично решение относно използването на различни части на модела в зависимост от определени условия. За да направите това, има описания> и>. пример за което е представено по-долу:
Условието, посочено в дескриптора>, и част от един модел, който е между дръжката и описател>, ще бъде използван само ако резултатът от изчисляването на условния израз ще бъде равна на истина. Ако резултатът е лъжа, тогава тази част на шаблона се игнорира. В този случай, той проверява стойността на stocklevel на собственост, както и ако тя е нула, целият модел се игнорира flowerTmpl. Това означава, че дисплеят ще бъде само тези продукти, които са на склад, както е показано по-долу:
По-сложните условия могат да бъдат определени с помощта на дескриптора>. което позволява да се определи частта от шаблона да се използва в случаите, когато в резултат на оценка на експресията на дескриптор> е невярно. Съответен пример е показано по-долу:
В този сценарий, набор от елементи, показвани се определя от колко единици продаваеми продукти от определен тип е в наличност: повече от пет, пет, пет, или дори по-малко не е налична. Аз въведена само малки разлики между елементите, получени за всяка от тези условия, но имате право да прилагат тези възможности за генериране на съвсем различно съдържание. На последно място, можете да се обадите на друго състояние, шаблони, ако е необходимо.
Резултатът от този сценарий е представена по-долу:
Свързани статии