Back to site
Since 2004, our University project has become the Internet's most widespread web hosting directory. Here we like to talk a lot about web servers, web development, networking and security services. It is, after all, our expertise. To make things better we've launched this science section with the free access to educational resources and important scientific material translated to different languages.

Želite li da kreirate dinamičke stranice u letu? Želite li da koristite jsRender? Želite li da ne opteretite pretraživač? Evo kako...

results screensearch screen

jsRender je sada naveo pravac šablona od strane jQuery tima ( od oktombra 2011). To je veoma moćno i nastavlja tamo gde su jQuery šabloni stali. Budite sigurni da su provereni mnogi primeri jsRender u rasponu od jednostavnih (kao što je ovaj) i onim sa više složenom implementacijom.

Napomena: ovo je ažuriranje na prethodni post gde sam pokazao kako se ista stvar radi na jQuery šablonu. Zahvaljujući @ziodave za mene jsRender od nedavno ima prednost nad jquery šablonima.

Bazna strana ovog primera je, počnimo sa osnovnom početnom stranicom mobilnog jquery .

Za API, uzimamo primer za getJSON iz jQuery .

 

 

Zatim, pozovite šablon motora skripti...
<script src="http://borismoore.github.com/jsrender/jsrender.js"></script>

Zatim, napravite mesto za svoj šablon sadržaja u živo...
<script id="flickrTemplate" type="text/x-jquery-tmpl">

Kada pravite vaš poziv getJSON, transformisati ćemo sadržaj šablona sa vraćenim podacima iz API pozivom i dodajte ga gde god želite.
$(document.body).append($("#flickrTemplate").render( data ));

Ovde je gotov kod ali vas molim da nestanete već samo da posmatrate izvor, imam nekoliko ključeva koji će posle odvojiti.

vidite ovaj primer u akciji

Važno razmatranje za kreiranje dinamičkih stranica u mobilnom jquery

  • Mobilni jQuery (po difoltu) odmah ne ukloni dinamičku kreiranu stranicu kao što radi sa stranicama koje su jednostavno izrađene tehnikom za izradu interaktivnih web aplikacija kroz normalne strane-na-stranice navigacije. Ovo može biti blagoslov i prokletstvo. To vam daje nešto da se brzo vratite, tako da ne morate ponovo da prikažete sadržaj. Međutim što više stranica kreirate bliže ćete doći tački gde jadni mali mobilni telefon neće biti u stanju da preuzme pritisak zbog broja DOM elemenata. Da bi dinamička generisana stranica automatski uklonjena kao normalna strana, morati ćete da izvršite ovu liniju skripti iz primera.
    Ova linija je trenutno komentarisana u izvoru.

    newpage.attr( "data-" + $.mobile.ns + "external-page", true ).one( 'pagecreate', $.mobile._bindPageRemove );

  • izvor pokazuje dva različita $.mobile.changePage poziva.

    Prvo: $.mobile.changePage("#"+data.pageId), naći stranicu preko selektora i onda napraviti prelaz. Promena će se odraziti na URL i na taj će se način pokazati u istoriji.

    Drugo: $.mobile.changePage(newpage) prošao je direktno jquery referentni objekat na stranici. Koristeći ovaj metod će izazvati prelaz stranice na novi sadržaj, ali neće uticati na URL i tako se ne pojavljuje kao ažurirano u istoriji.

  • Šablon sadržaja jsRender održava u okviru skripte oznaku reference po ID. <script id="flickrTemplate" type="text/x-jquery-tmpl"> jQuery mobilni ne pokušava da analizira ili poboljša sadržaj tih skripti fajlova. Primer je jedna strana, na primer, čak i sa ovim šablonima. To nije sve jer se šabloni transformišu sa podacima i rezultati su u prilogu DOM gde ćete doći do stranice.

  • Ovaj primer je stvaranje pune stranice. Međutim, ne postoji razlog da ne možete da koristite iste tehnike za kreiranje fragmenta stranice i ubrizgate ih u bilo koji deo jquery mobilne stranice. Na primer, ako ste udarili neku API na redovnim intervalima i samo ažurirali listu stranice koju ste videli, možete jednostavno da koristite transformaciju šablona i zamenite ili dodate trenutni prikaz liste, a zatim pozovete $("#some_list").listview("refresh");

Nadam se da ste ovde našli nešto korisno. Kao i uvek možete da ostavite komentar ili pošaljete poruku na hello@roughlybrilliant.com ili me nađete na twitteru @sgliser .

Sada, idite i budite briljantni.





Published (Last edited): 20-03-2013 , source: http://roughlybrilliant.com/jsrender_json_apis_and_jquery_mobile