JavaScript šablonování - JavaScript templating

JavaScript šablonování Odkazuje na strana klienta datová vazba metoda implementovaná s Jazyk JavaScript. Tento přístup se stal populárním díky zvýšenému používání JavaScriptu, jeho zvýšení schopností zpracování klientů a trendu outsourcovat výpočty do webového prohlížeče klienta. Populární knihovny šablon JavaScript jsou AngularJS, Backbone.js, Ember.js, Řídítka.js, Vue.js a Mustache.js. Častou praxí je použití double složené závorky (tj. {{klíč}}) k častému volání hodnot daného klíče z datových souborů JSON předměty.

Příklady

Všechny příklady používají externí soubor prezidenti.json s následujícím obsahem

{  „prezidenti“ : [      { "název": "Washington", "jméno": "Jiří", "narozený": "1732", "smrt": "1799" },      { "název": "Lincoln", "jméno": "Abraham", "narozený": "1809", "smrt": "1865" }  ]}

Všechny příklady vytvoří následující HTML seznam:

  • Washington (1732-1799)
  • Lincoln (1809-1865)
KnihovnaHTML kódVysvětlení

Šablona DNA

<odkaz rel="styly" typ=„text / css“ href=„... / template.css“/><skript src=„... / jquery.min.js“></skript><skript src=„... / jquery.template.min.js“></skript> ➊Naši oblíbení prezidenti jsou:<ul id="cílová">    <li šablona=„[prezidenti]“ z-var=„jméno., narozen., smrt.“>     $ {name} ($ {born} - $ {death}) </li></ul> ➋<skript>    $.getJSON(„... / presidents.json“, funkce(data) {        $('#cílová').šablona(data);    });</skript> ➌

➊ Načtěte potřebné zdroje, včetně požadovaných jQuery
➋ HTML kód s šablona označení atributu pro každou podtabulku a z-var pokyny k výměně.
➌ Načíst data JSON z prezidenti.json a použít data na šablonu HTML s atributem id "cílová".

Mustache.js

<skript src=„... / jquery.min.js“></skript><skript src=„... / mustache.min.js“></skript> ➊Naši oblíbení prezidenti jsou:<ul id="cílová"></ul> ➋<skript id="prezident-šablona" typ=„text / šablona“>    {{#prezidenti}}        <li>{{název}} ({{narozený}}-{{smrt}})</ li>    {{/ prezidenti}}</skript> ➌<skript>    $.getJSON(„... / presidents.json“, funkce(data) {        var šablona = $('# president-template').html();        var informace = Knír.to_html(šablona, data);        $('#cílová').html(informace);    });</skript> ➍

➊ Zde načtěte potřebné knihovny mustache.js a jQuery
➋ HTML kód poskytuje „cíl“ pro vložení generovaného obsahu.
➌ Poskytněte šablonu s názvem „president-template“.
➍ Poslední je funkce uchopení dat JSON a u každého podpoložky každého prezidenta uchopení jedné šablony a její vyplnění, aby se nakonec vybral cíl stránky HTML, který k ní připojí celek.

Šablona šablony se stane užitečnou, když se distribuované informace mohou změnit, je příliš velká na to, aby ji udržovaly různé stránky HTML dostupné lidské zdroje, a není dostatečně velká, aby vyžadovala těžší šablony na straně serveru.

Viz také

Reference

  • JavaScript šablony, Mozilla Developer Network, 2013
  • Basavaraj, veena (2012), Vyvolání šablon na straně klienta: knír, řídítka, dust.js a další, Linkedin.com
  • Villalobos, Ray (2012), Úvod do šablonování JavaScriptu (videonávod) s Mustache.js, ViewSource.com, archivovány z originál dne 2013-05-13
  • Burgess, Andrew (2012), Osvědčené postupy při práci se šablonami JavaScriptu, Net.tutsplus.com
  • Landau, Brian (2009), Srovnávání šablon knihoven Javascript
  • http://www.jquery4u.com/javascript/10-javascript-jquery-templates-engines/
  • Srovnání s jinými rámci, Vue.js, vyvoláno 11. prosince 2018