Jquery jtemplates.js pěkný nástroj pro tvorbu šablon html-json

Jquery Jtemplates Js Nice Html Json Template Tool



Přetištěno: https://blog.csdn.net/chenhongwu666/article/details/51798476

jTemplates je zásuvný modul šablony založený na JQuery, který je výkonný, takže se nemusíte starat o vázání dat s JS. Použití php, asp.net, jsp atd. V backendovém jazyce není problém. Použití vykreslování šablon může výrazně zlepšit výkon programu. Pomocí asynchronních dat získáte data zpět bez celé stránky. Výhody se neomezují pouze na tyto.



Stáhněte si šablony jtemplates, oficiální dokumentace webových stránek je velmi podrobná



Otevřete oficiální web: http://jtemplates.tpython.com/(Nevím proč, teď to nemohu otevřít)



V levé části vyhledejte možnost Stáhnout a poté klikněte na soubor, který chcete stáhnout. Nejnovější verze je 0.8.4.

Šablony jTemplates s jQuery zapnutými nebo delegovanými způsoby zpracování událostí vás mohou fascinovat. Haha...

Následuje podrobný souhrn použití:



Jednoduché použití šablony jtemplates, nejprve použijte jtemplates k použití dat JSON, zde můžeme chtít vytvořit data formátu JSON, a to následovně:

{
'name': 'Web Mullen',
'list_id': 89757,
'stůl':[
{'id': 1, 'name': 'Rain', 'age': 22, 'mail': 'root @ xxxxx'},
{'id': 2, 'name': 'Pete', 'age': 24, 'mail': 'root @ xxxxx'},
{'id': 3, 'name': 'Kaka', 'age': 20, 'mail': 'root @ xxxxx'},
{'id': 4, 'name': 'play', 'age': 26, 'mail': 'root @ xxxxx'},
{'id': 5, 'name': '', 'age': 25, 'mail': 'root @ xxxxx'}
]
}

Dále vytvořte novou stránku jtemplates_demo1.html

Pak představte jquery, používám jquery-2.1.1.min.js, můžete si jej stáhnout zde http://www.jquery.com/

Vložte kód souboru js takto:



Dále vytvořte styl šablony

kód zobrazit níže:


ID oddělení: {$ T.list_id}
Odpovídá: {$ T.name}








{#foreach $ T.table as record}






{#/pro}
číslo název stáří Poštovní schránka
{$ T.record.id} {$ T.record.name} {$ T.record.age} {$ T.record.mail}



Toto je efekt, který chci konečně zobrazit, tj. Šablona a poté je šablona definována. Poté definujeme štítek, který se používá k přenosu zobrazovaných dat. Obecně můžeme použít div nebo jiné štítky. Zde používám div takto:

V tomto okamžiku je zapsána značka HTML popředí našich zobrazovacích dat. Pořadí šablony a výsledku není nutné, ale pro usnadnění čtení použijte následující pořadí:



ID oddělení: {$ T.list_id}
Odpovídá: {$ T.name}








{#foreach $ T.table as record}






{#/pro}
číslo název stáří Poštovní schránka
{$ T.record.id} {$ T.record.name} {$ T.record.age} {$ T.record.mail}



Dále musíme nastavit šablonu a zpracovat data v js, přímo v kódu, a poté vysvětlit význam kódu, kód je následující:


$ (funkce () {
// Inicializace dat JSON
var data = {
'name': 'Web Mullen',
'list_id': 89757,
'stůl':[
{'id': 1, 'name': 'Rain', 'age': 22, 'mail': 'root @ xxxxx'},
{'id': 2, 'name': 'Pete', 'age': 24, 'mail': 'root @ xxxxx'},
{'id': 3, 'name': 'Kaka', 'age': 20, 'mail': 'root @ xxxxx'},
{'id': 4, 'name': 'play', 'age': 26, 'mail': 'root @ xxxxx'},
{'id': 5, 'name': '', 'age': 25, 'mail': 'root @ xxxxx'}
]
}

// Nastavit šablonu
$ ('# result'). setTemplateElement ('template')
// Načíst data do šablony
$ ('# result'). processTemplate (data)
})

Nejprve odkazujeme přímo na jQuery vpředu, napsaný přímo zde v $ (function () {})

$ ('# result'). setTemplateElement ('template') Tento krok je velmi důležitý a je vysvětlen následovně:

Význam tohoto kroku je, že šablona nastavení div id = 'result' je id = 'template', a poté jsou data zpracována. Data zde jsou data json, takže data json lze přímo zobrazit. Toto je vykreslování šablon, jednoduché. Toto je úplný kód takto:






jQuery - jTemplates




.kontejner{
šířka: 1000px
výška: 600px
okraj: 0 auto
}
.šablona{
displej: žádný
}
stůl{
barva pozadí: #fff
}
stůl tr {
polstrování: 8px
border-bottom: 1px solid #eee
}
tabulka tr td {
polstrování: 10px
border-bottom: 1px solid #eee
}


$ (funkce () {
// Inicializace dat JSON
var data = {
'name': 'Web Mullen',
'list_id': 89757,
'stůl':[
{'id': 1, 'name': 'Rain', 'age': 22, 'mail': 'root @ xxxxx'},
{'id': 2, 'name': 'Pete', 'age': 24, 'mail': 'root @ xxxxx'},
{'id': 3, 'name': 'Kaka', 'age': 20, 'mail': 'root @ xxxxx'},
{'id': 4, 'name': 'play', 'age': 26, 'mail': 'root @ xxxxx'},
{'id': 5, 'name': '', 'age': 25, 'mail': 'root @ xxxxx'}
]
}

// Nastavit šablonu
$ ('# result'). setTemplateElement ('template')
// Načíst data do šablony
$ ('# result'). processTemplate (data)
})







ID oddělení: {$ T.list_id}
Odpovídá: {$ T.name}








{#foreach $ T.table as record}






{#/pro}
číslo název stáří Poštovní schránka
{$ T.record.id} {$ T.record.name} {$ T.record.age} {$ T.record.mail}







Zde je několik poznámek:

1, první styl šablony musí používat štítek, jinak můžete také dát


ID oddělení: {$ T.list_id}
Odpovídá: {$ T.name}








{#foreach $ T.table as record}






{#/pro}
číslo název stáří Poštovní schránka
{$ T.record.id} {$ T.record.name} {$ T.record.age} {$ T.record.mail}



V, je to v pořádku

2, formát JSON musí být správný a nesmí používat jednoduché uvozovky, jedná se o uvozovky

Výsledný efekt zobrazení je následující: