A sablonokat a kormány segítségével ismertettük az utolsó videóban. De a kormány nem az egyetlen sablonmegoldás a blokkon. Ebben a videóban az Aláhúzással elérhető sablont fogjuk használni.
Miért? Nos, az egyik oka az, hogy lehet, hogy már használja az Aláhúzást a projektjén. Rendkívül népszerű könyvtár, mert a jQuery-hez hasonlóan egy csomó hasznos módszert kínál, amelyek böngészőkön keresztül működnek. Ahogy mondani szokták:
Ez a nyakkendő, ha együtt járunk a jQuery tuxjával és a Backbone.js harisnyatartóival.
Ha már használja az Aláhúzást, az nagy ösztönzést jelentene a sablonok használatára.
Gyors tesztelésem során a kormány 1.0.0 14,2 KB, és az Underscore 4,9 KB tömörített és tömörített. A kormány egyszerűen rendelkezik több funkcióval (pl. Megjegyzés, hurkok, útvonalak, logika stb.). Egyszerű bemutatónkban amúgy sincs szükségünk ezekre a funkciókra, így ez nem éppen korrekt összehasonlítás, de hát hát csak tanulunk.
A sablon helyett a HTML-ben meg kell határoznunk az aláhúzás sablonokat a JavaScript-ben. Visszatértünk a húrok összefűzéséhez.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledmajd egy olyan funkcióvá alakul, amelyet az adatobjektum-kontextusunkkal meghívhatunk, és az adott adatokkal kitöltött HTML-t adja vissza. A hatékonyság érdekében összefűzzük a HTML-t, amely egy nagy karakterláncba kerül, hogy csak egyszer csatolhassuk a DOM-hoz:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);Ebben a videóban elvontuk az adatok megszerzését is. Létrehoztunk egy JSON forrást, és a jQuery $ .getJSON () függvényét használtuk a megszerzéséhez. Mint ahogy valószínűleg a „való életben” is meg kellene tennünk.
$.getJSON("/path/to/json.js", function(data) ( ));A mi a hurok és az ilyen adatokra támaszkodó információ a visszahívásban szerepel. Vagy valószínűbb, hogy valamilyen más jól elnevezett funkciót hív meg ennek kezelésére, tisztán elkülönítve a dolgokat.
Itt hova kerültünk:
Lásd Chris Coyier (@chriscoyier) Pen IpAdn-ját a CodePen-en
Meg kell jegyezni, hogy a LoDash 100% -ban kompatibilis azzal, amit itt tettünk. Nem vagyok egészen biztos abban, hogy a LoDash sablonok jobbak / gyorsabbak / lassabbak / rosszabbak-e, mint az Aláhúzásoké, de kicseréltem a könyvtárakat, és a bemutató rendben működött.