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 development, networking and server security. 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.

Knockout.js pro saveti – rad sa templates

Kao i prosli put, kad smo pricali o nizovima koji se mogu posmatrati , zeleo sam da podelim sa Vama nekoliko (nadam se) korisnih saveta kada je u pitanju rad sa templates u Knockout. Ovo nece biti preobimni uvid u sa knockout – postoji mnogo resursa koji to pokrivaju - vec skupina malih saveta koji Vam mogu uciniti zivot laksim.

Opet, poznavanje sa nokautom se prepostavlja .

Templating koji je lak i moze ponovo da se koristi

Templating moze biti problem ukoliko zelite da ponovo koristite isti tempalte za vise strana. Necete uraditi copy paste za Vas template na svakoj strani, zar ne? Mozete, umesto toga, korisiti odlican Knockout.js External Template Engine .

Ukratko, isti Vam omogucava definisanje template u eksternim fajlovima i dinamicki ih pokrece. zapravo on se sam veoma dobro prikljucuje na KO, posto preskace postojece template mehanizme, tako da mozete korisiti sve poznate veze.

Samo jedan kratak pogled na kod. Recimo da imate team template koji hocete da jos da koristite. Objavite ga u zasebnom fajlu.

1< li>
2 < h3>
3 < span
data-bind="text: location">< /span>
4 < span
data-bind="text: name">< /span>
5 < /h3>
6< /li>

Sada u Vasem, odnosi se na pokretac

1 < script type="text/javascript" src="libs/koExternalTemplateEngine_all.js">< /script>

Morate definisati relative path za Vas tempalte u JS kodu.

1 infuser.defaults.templateUrl = "templates";

I onda mozete poceti da koristite temaplte, pozivajuci ih koriscenjem KO poznate “name” karakteristike template veze.

1 < ul data-bind="template: { name: 'team', foreach: filteredTeams }">

Po pravilu template ime zapravo odgovara imenu Vaseg template fajla. Postoji mnogo ostalih opcija za konfigurisanje, kao sto su sufiksi/prefiksi imena, ili cahing opcije, pa tako proverite da li ste ih videli! Ali najvaznije je da sada mozete da pozovete isti tempalte na razlicitim stranama.

Mozete izdati template direktno iz Vase custom veze

Ukoliko vam je ovako nesto potrebno, tada rucno mozete izdati templates iz Vaseg JS koda. jedan takav primer moze biti izdavanje templates iz Vase custom veze. (sto moze taj proces uciniti prefinjenim i adekvatno napravljenim)

Razmotrimo jednostavan primer:

1 function homeViewModel() {
2 var self = this;
3 self.dummy
= {
4 dummyText: ko.observable("text")
5 }
6 }

A sada, zamislite da imate neke custom veze - lako mozete izdati tempalte odatle:

1 ko.bindingHandlers.myBinding = {
2 update: function
(element, valueAccessor, allBindingsAccessor) {
3 var accessor = valueAccessor();
4 //do cool stuff
5 ko.renderTemplate("myTemplate", accessor, {}, element, 'replaceNode');
6 }
7 };

RenderTemplate metoda podrazumeva templateName, bindingContext, rendering engine opcije, DOM element da korsti i template rendering mode kao argumente.

A Vi cete postaviti HTML u skaldu sa:

1 <div data-bind="myBinding: dummy"></div>
2
<script id="myTemplate" type="text/html">
3 <span data-bind="text: $data.dummyText"></span>
4 </script>

Naravno ovo je samo ejdan trivijalni primer, ali se nadam da ilustruje sustinu - uticuci na ko.renderTemplate, i pzoivajuci na manuelno podesavanje kad god je potrebno.

Koriscenje inline templating kad god je moguce

Inline templating – i koriscenje foreach veze, radi skoro ⅓ brze nego kada primenjujemo tempalte iz odovjenog DOM elementa. takozvanog template binding.

Michael Best je sastavio strvarno lepo poredjenje performansi izmedju ova dva pristupa.

Tako da kad god ne planirate da opet koristie template koristite inline foreach vezu umesto odvojenih template elemenata.

1<ul data-bind="foreach: teams">
2 <li>
3 <h3>
4 <span data-bind="text: location"></span>
5 <span
data-bind="text: name"></span>
6 </h3>
7</li>
8</ul>

Mozete izdati tempate u template-u

Ovo moze izgledati kao trivijalna stvar ali mnogo ljudi ne zna nista o ovome. Zapravo mozete obavestiti drugi template u okviru template i sastaviti Vas HTML output na taj nacin. Na ovaj nacin mozete imati manje HTML snippets za ponovno koriscenje na razlicitim stranicama i u okviru razlicitih templates.

Tako da je savrseno dobro da uradite nesto ovako:

1<div data-bind="template: { name: 'teamIndex', foreach: teams }"></div>
2

3<script id="teamIndex" type="text/html">
4<h1 data-bind="text: $index"></h1>
5<div data-bind="text: name"></div>
6<div data-bind="template: { name: 'teamLocation'}"></div>
7</script>
8
9<script id="teamLocation" type="text/html">
10<span data-bind="text: location"></span>
11</script>

Takodje mozete preneti podatke ili foreach karakteristike na child template da biste promenili njegov kontekst. Ponovo, jednostavan primer:.

1<div data-bind="template: { name: 'league', foreach: leagues }"></div>
2
3<script id="league" type="text/html">
4 <span data-bind="text: name"></span>
5 <div data-bind="template: { name: 'team', foreach: teams}"> </div>
6</script>
7
8<script id="team" type="text/html">
9 < span data-bind="text: name">< /span> <span data-bind="text: location"></span>
10< /script>

Kao sto vidite, ovako mozete struktuirati svoje podatke i ponovo koristiti templates veoma lako..

Izbegnite kombinovanje ostalih veza sa template vezom

Ovo je divan uvid koji nam je dao jedan jedini RP Niemeyer na njegovom blogu .

Sustinski, zbog nacina na koji se veze procesuiraju, trebalo bi da izbegavate kombinovanje ostalih veza sa template vezom, posebno kada imamo data-heavy scenario. Knockout koristi jednu kompjutersku vidljivu da bi pratio sve veze jednog elementa, pa tako promena na jednu zavisnu izaziva update dogadjaje za sve veze elementa. Ja zaista preporucujem da procitate clanak koji je Ryan napisao. Clanak predstavlja neverovatan uvid u unutrasnji rad Knockout-a..

Primer. Umesto da ih kombinujete na jednom DOM elementu:.

1 < ul data-bind="visible: showingTeams, myCustomBinding: userUIPreferences, template: {

Razdvojite ih:

1 <div class="wrapper" data-bind="visible: showingTeams, myCustomBinding: userUIPreferences">
2 < ul data-bind="template: { name: 'team', data: teams}">< /ul>
3 < /div>

Zakljucak

Templating je velik i bitan deo Knockout.js. kao i sve u Java Script-u, templating moze biti neverovatno mocan i fleksibilan, ali ukoliko se ne koristi pravilno moze doci do nezgodnih posledica.

Nadam se da ce Vam par ovih saveta pomoci da manevrisete kroz uzbudljiv Knockout svet!





Published (Last edited): 08-02-2013 , source: http://www.strathweb.com/2012/08/knockout-js-pro-tips-working-with-templates