Viimeisessä videossa käsiteltiin mallintamista ohjaustangoilla. Mutta ohjaustanko ei ole ainoa malliratkaisu. Tässä videossa käytämme alaviivojen mallia.
Miksi? Yksi syy on, että saatat jo käyttää alaviivaa projektissasi. Se on erittäin suosittu kirjasto, koska se tarjoaa jQueryn tapaan joukon hyödyllisiä menetelmiä, jotka toimivat selainten yli. Kuten he sanovat:
Yhteys jQueryn tuxin ja Backbone.js: n henkseleiden kanssa on solmio.
Jos käytät jo alaviivaa, se olisi suuri kannustin käyttää sen mallipohjaa.
Myös pikatestissä ohjaustanko 1.0.0 on 14,2 kt: n pakattu ja pienennetty ja alaviiva on 4,9 kt: n pakattu ja pienennetty. Ohjaustangolla on yksinkertaisesti enemmän ominaisuuksia (esim. Kommentointi, silmukat, polut, logiikka jne.). Yksinkertaisessa esittelyssä emme kuitenkaan tarvitse näitä ominaisuuksia, joten se ei ole aivan oikeudenmukainen vertailu, mutta no, me vain opimme.
Sen sijaan, että mallia olisi HTML: ssä, meidän on määriteltävä alleviivatut mallit JavaScriptiin. Olemme palanneet jousien ketjutukseen.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledmuuttuu sitten funktioksi, johon voimme kutsua dataobjektikontekstimme, ja palauttaa HTML-koodin, joka on täynnä kyseisiä tietoja. Tehokkuuden saavuttamiseksi aiomme liittää HTML: n, joka palaa yhdeksi isoksi merkkijonoksi, jotta voimme liittää sen DOM: iin vain kerran:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);Tässä videossa abstraktiimme myös datan hankkimisen. Loimme JSON-lähteen ja käytimme jQueryn $ .getJSON () -funktiota sen saamiseksi. Kuten meidän pitäisi todennäköisesti tehdä "tosielämässä".
$.getJSON("/path/to/json.js", function(data) ( ));Meidän silmukka ja sellainen, joka perustuu kyseisiin tietoihin, menee takaisinsoittoon siellä. Tai todennäköisemmin kutsuu jotain muuta hyvin nimettyä toimintoa hoitamaan sen pitämällä asiat puhtaasti erillään.
Tässä päädyimme:
Katso Chris Coyierin (@chriscoyier) kynä Pen IpAdn CodePenistä
On huomattava, että LoDash on 100% yhteensopiva sen kanssa, mitä olemme tehneet täällä. En ole aivan varma, onko LoDash-mallisto parempi / nopeampi / hitaampi / huonompi kuin Underscore's, mutta vaihdoin kirjastot ja demo toimi hienosti.