Efni.
Þessi grein birtist fyrst í tölublaði 228 í .net tímaritinu - mest selda tímarit heimsins fyrir vefhönnuði og forritara.
Ef þú ert að vinna með nokkuð einfalt innihaldsríkt vefsvæði þá þarf JavaScript þitt ekki að verða of flókið; kannski ljósaboxáhrif fyrir myndasafn og einhvers konar staðfestingu. En um leið og hæfilegu magni af gögnum eða þörfinni á að fylgjast með ástandi HÍ í forritinu þínu er bætt við blönduna þá getur það byrjað að valda smá vandræðum.
Fyrir tengi þar sem notandinn getur flett í gegnum gögn, breytt útliti eða stöðu íhluta á síðunni eða valið eða síað sem þarf að vera viðvarandi og reynt að treysta á DOM skoðun til að skilja hvar hlutirnir eru líklegir til að enda í gremju. Ef til vill er betri leið til að nálgast hlutina að hafa hreinn aðgreiningu á framsetningu og rökfræði og þar koma inn rammar eins og Knockout. Þú gætir nú þegar notað viðburðaraðgerðarbindingar í jQuery eða öðrum JavaScript bókasöfnum til að tengja aðgerðir notenda við hluta af síðu , en með Knockout getum við gengið skrefi lengra og notað JavaScript til að fylla sjálfkrafa viðmótið - þannig að alltaf þegar gögnin eða ástandið breytist breytist HÍ.
Í ríkri þróun HÍ getur þetta mjög einfaldað ferlið við að hlaða og uppfæra gögn. Það er líka öflugra og prófanlegt, svo hvort sem þú ert að vinna á eigin vegum eða í liði þá er það frábær leið til að auðvelda öllum lífið.
Hvað er knockout?
Knockout er JavaScript útfærsla á Model-View-View Model mynstri, leið til að skilgreina gögn í módelhlut og binda síðan DOM-þætti eða sniðmát við þau gögn. Þrír hlutar mynstursins eru:
- Fyrirmyndin Gögnin þín: venjulega verður þetta JSON hlaðið í gegnum Ajax, en það eru margar aðrar leiðir til að fá gögn í forritið þitt, svo sem að spyrja um núverandi DOM.
- Útsýnið HTML þinn, með hvaða þætti sem þú vilt byggja eða vinna með, gefið a gagna-binda eiginleiki. Þetta notar HTML5 sérsniðna gögn - * eiginleika setningafræði, þannig að það stenst löggildingu en er einnig hægt að túlka í HTML4 og XHTML skjölum.
- Útsýnislíkanið JavaScript hlutatilvikið sem tengir allt saman. Þetta eru fjölnota aðgerðir, þannig að þú getur haft mörg dæmi um útsýnislíkan á einni síðu eða hreiðrað barnalíkan í foreldri.
Alltaf þegar útsýnislíkanið breytist, annaðhvort með gagnaniðurfellingu eða notandaaðgerð, eru viðeigandi gagnatengdir DOM-þættir uppfærðir sjálfkrafa þannig að HÍ er alltaf samstillt við útsýnislíkanið. Bindingar geta einnig verið tvíhliða, þannig að gildi sem bindur formeiningu mun uppfæra JavaScript módelhlutinn á notandainntakinu, tilbúinn til að vista aftur á netþjóninum.
Skjölin og gagnvirkt námskeið á Knockout síðunni eru frábær, þannig að frekar en að endurtaka þau, þá mæli ég með að þú kíkir og vinnir í gegnum þau til að fá tilfinningu fyrir því hvað það getur gert. Það er líklega þess virði að minnast á að notkun á gagnabindast eiginleiki fyrir sniðmát er ekki smekkur allra og ef þú ert ekki varkár getur það leitt til óæskilegs magns af JavaScript sem mengar fallega hreina HTML þinn. En það eru leiðir til að takast á við þetta og það er líka hægt að bæta eiginleikunum við forritið þegar þú frumstýrir skoðunarlíkanið þitt.
Að nota það
Einfalt dæmi um að nota útsýnislíkan til að rekja og uppfæra ástand HÍ er myndasafn. Við höfum sett af myndum og myndatexta til að sýna: þetta eru gögnin okkar. Það er líka þörf á að stilla hver er myndin sem er valin ásamt öðrum breytum eins og hvort smámyndasvæðið ætti að vera til vinstri og hægri og hvort við erum í byrjun eða lok síðunnar og þetta er UI ástandið. Þetta verður nokkuð bein-bein dæmi, en ég nefni hvar það er auðveldlega hægt að framlengja.
Auðvitað eru óteljandi dæmi um þessa tegund af íhlutum þegar til staðar, en flestir munu koma með sína hugmynd um hvernig álag þitt ætti að vera lagt upp - og að grafa í meðfylgjandi CSS og byrja að gera breytingar getur verið leiðinlegt. Og það er áður en þú uppgötvar að viðbótin gerir líka 10 hluti sem þú þarft ekki og bætir við magn hennar og flækjustig. Vissulega er miklu betri leið að byrja á HTML og skipulagi sem þú vilt og bæta hreint við virkni þaðan.
Lykilreglan sem þarf að muna þegar þróuð er með útsýnislíkan er að hún hefur ekki eða þarfnast þekkingar á því hvernig DOM er byggt upp eða lagt upp. Uppfærslur HÍ eru meðhöndlaðar með bindingum í HTML; ef þetta er til staðar mun forritið virka óháð því hvernig það lítur út. Þú getur bundið eins marga þætti og þú vilt við sama hluta útsýnislíkansins og ef binding er ekki gerð þá eru engin neikvæð áhrif svo þú getur endurnýtt sömu rökfræði í mörgum mismunandi aðstæðum.
Útsýnislíkanið er eingöngu að takast á við gögn og þessi lausa tenging þýðir að það er mjög auðvelt að smíða rökrétt, prófanleg íhluti sem þú getur passað saman eins og þú vilt. Knockout er samhæft allt að IE6 og er ekki háð neinu öðru JavaScript bókasafni, svo ég hef haldið demo rammanum-agnostic þar sem mögulegt er. Ég er að nota jQuery til að frumstilla síðuna og skoða líkanið, en það er engin ástæða fyrir því að þú gætir ekki skipt þessu út fyrir ramma sem þú valdir - eða hreint JavaScript.
Að byrja
Við skulum vinna í gegnum þrjá meginhlutana sem mynda kynninguna. Í fyrsta lagi eru gögnin eða líkanið, sem í þessu tilfelli kemur af lista yfir tengla á myndir í HTML skjali.
Héðan frá getum við notað DOM fyrirspurn til að draga slóðina á hverja mynd og tengda myndatexta hennar og afhenda þær útsýnislíkanið með því að nota frumstilling virka. Við munum endurtaka þessi gögn í nýrri HTML uppbyggingu, þannig að í anda framsækinnar endurbóta getum við falið upprunalegu álagningu með JavaScript meðan á síðu er hlaðið. Þannig verður grunnmyndalistinn ennþá tiltækur fyrir vafra sem geta ekki notað ríkari notendaviðmót.
ul> li> a href = "img / 1.webp"> Mynd 1 myndatexti / a> / li> li> a href = "img / 2.webp"> Mynd 2 myndatexti / a> / li> li> a href = "img / 3.webp"> Mynd 3 myndatexti / a> / li> ... li> a href = "img / 8.webp"> Mynd 8 myndatexti / a> / li> / ul>
Ef við tökum hugtökin í nafninu á MVVM mynstri í röð þá er útsýnið næst, en það er skynsamlegra að hylja útsýnislíkanið fyrst. Þetta er sá hluti sem geymir gögnin og hvaða mynd er valin og síðar munum við einnig fjalla um hvað gerist ef notandinn breytir valinu.
var síða = síða || {módel: {}}; site.models.Gallery = virka () {var sjálf = þetta; this.itemsObservables = ko.observableArray (); this.init = aðgerð (gögn) {ko.utils.arrayForEach (gögn, aðgerð (hlutur) {self.itemsObservables.push (ný síða.módels.GalleryItem (hlutur));}); }} site.models.GalleryItem = function (el) {this.isSelected = ko.observable (false); þetta.src = el.href; this.caption = el.innerHTML;}
Venjulega bý ég til nafnsvæði fyrir kóðann minn; það dregur verulega úr líkum á að stangast á við öll önnur JavaScript á vefsvæðinu þínu og gefur því frelsi til að hringja í sýnalíkan okkar gallerí án þess að hafa áhyggjur af því að það gæti verið annað ‘gallerí’ skilgreint annars staðar. Knockout býr líka til sitt eigin nafnsvæði, ko, sem er notað sem ílát fyrir allar sínar eigin aðferðir - svipað og $ jQuery.
Þessar tvær aðgerðir sem fylgja þessu eru útsýnislíkön okkar, ein fyrir heildarsalinn og ein fyrir hlutina inni í því. Eins og fyrr segir hefurðu sveigjanleika til að verpa barnalíkön svo það er skynsamlegt að brjóta hlutina niður í aðskilda reiti þegar þú hefur virkni sem þú vilt endurtaka.
Inni í aðalskoðunarlíkaninu er útsetningarlegt, atriði Athuganlegtþar sem við geymum gögnin fyrir myndasafnið okkar - vefslóðir myndatexta og myndatexta. Að búa það til á þessu frekar en sem var gerir það að eiginleika virka hlutarins, þannig að þegar við myndum afrit af útsýnislíkaninu síðar verður þetta áberandi tiltæk sem opinber aðferð - það er nauðsynlegt til að afhjúpa það til að binda gögn . Það er líka áberandi fylki, sem þýðir að þegar við ýtum eða fjarlægjum hluti í það getur Knockout fylgst með þessu og uppfært HÍ í samræmi við það.
Með því að lýsa því yfir ko.observableArray með tóma aðgerðarsímtali erum við að búa það til með „óskilgreint“ innihald, svo við ættum að búa til frumstillingaraðferð til að geta bætt gögnum við það. Næsta aðferð inni í aðgerðinni, this.init, sér um það.
Þetta er aðgerð sem tekur gagnagrunn - í okkar tilfelli verður það afleiðing fyrirspurnar í DOM - og aftur er það skilgreint sem opinber aðferð, innan þess, svo að við getum kallað það utan sjónarmódelíkans.
Meginmál aðgerðarinnar notar aðferð við útsláttaraðgerðir, ko.arrayForEach, að lykkja í gegnum gagnagrunninn og ýta hverju atriði áfram í atriði Athuganlegt. Þú gætir líka notað $ .hver í jQuery eða _.hver í undirstrikun - eða hvaða aðferð sem þér líkar. Auðvitað, þegar við erum inni í þessu arrayForEach svarhringing það hefur sitt þetta umfang, þannig að í útsýnislíkaninu sjálfu höfum við búið til breytilegt sjálf til að geta skilað tilvísuninni inn.
ko.utils.arrayForEach (data, function (item) {self.itemsObservables.push (new site.models.GalleryItem (item));});
Frekar en að ýta aðeins á hlutinn sjálfan, sem verður DOM-þáttur, erum við að búa til dæmi um annað útsýnislíkanið, GalleríLiður, sem mun geyma eiginleika og athuganlegar fyrir einstaka hluti í myndasafninu. Þetta sýnir kostinn við að kljúfa útsýnislíkanið okkar í smærri blokkir, þar sem við getum komið þessu barnaskoðunarlíkani í opna skjöldu eins oft og við viljum.
site.models.GalleryItem = function (el) {this.isSelected = ko.observable (false); þetta.src = el.href; this.caption = el.innerHTML;}
Fyrst búum við til eitt útsláttar útsýni erValið sem, eins og augljóst má vera, er hvort þessi liður er valinn eða ekki. Í stað þess að gera það „óskilgreint“ með tómt aðgerðarhringingu munum við sjálfgefið það vera rangt með því að færa gildið inn þegar við búum til hið áberandi.
Síðan (og hér erum við að treysta á að frumefni sé sent inn, en þú gætir prófað fyrir aðra ef þess er krafist) settum við þetta.src til frumefnisins href eiginleiki og þetta.mynd til þess innerHTML. Þetta eru einfaldar breytur, frekar en athuganlegar, vegna þess að við erum ekki að búast við að þær breytist og þurfum þess vegna ekki kostnaðinn við að halda þeim í áhorfandi keðju Knockout. Og ástæðan fyrir því að við erum að gera þetta yfirleitt er sú að við erum að draga gögnin úr frumefninu og geyma þau í óhlutbundnum hlut svo við getum beitt þeim aftur eins og við viljum.
Á grundvallarstigi er þetta allt sem við þurfum í gerðum okkar til að búa til einfalt gallerí. Lítum nú á HTML sniðmát fyrir HÍ, eða Skoða, þar sem við munum binda gagnsemi þess:
div data-bind = "foreach: itemsObservables"> div> img width = "800" height = "533" data-bind = "attr: {'src': src, 'alt': caption}" /> / div> / div>
Þú sérð að við höfum sett upp gámareiningu, div með bekknum gallerí, og innan þessa er sniðmát, div.item. Fyrri útgáfur af Knockout krafðu þig um að fella þessi sniðmát í forskriftarþætti, sem frá sjónarhóli hreinnar HTML var ekki mjög fullnægjandi, en í núverandi 2.0 útgáfu er þetta ekki lengur nauðsynlegt. Ef þú vilt geturðu jafnvel fjarlægt gámaþætti með því að nota stýrivæddar bindingar í sérstaklega sniðnum HTML athugasemdum, en við munum ekki fjalla um það hér.
Á gámnum er a gagnabindast eiginleiki með gildið foreach: itemsObservables, sem er að segja Knockout að lykkja í gegnum það áhorfandi fylki og beita sniðmátinu á hvaða hluti sem eru inni í því. Atriðin eru dæmi um GalleríLiður skoða líkanið sem við bjuggum til í init aðgerðinni, þannig að gögnin sem bindast á myndefnið innan sniðmátsins geta fengið aðgang að src og myndatexti gildi innan hvers og eins og stilltu eiginleika frumefna í samræmi við það.
Þar sem fylgjanlegt fylki er tómt áður en við köllum í því aðferð, á þeim tímapunkti verður engin div.item þætti í DOM - tómt sniðmát er einfaldlega geymt. Ef við byrjum að bæta við eða fjarlægja hluti í fylkið, veldur gagnabindingin afrit af þessum sniðmátareiningum sem verða til eða eytt, allt sjálfkrafa.
Síðasta skrefið til að láta allt þetta vinna er að búa til dæmi um Gallerí skoðaðu líkan á síðuhlaða og fylltu það með DOM frumefni okkar. Ég er að nota jQuery í tilbúinni aðgerð fyrir þetta, en ekki hika við að skipta um bókasafn og tækni sem þú velur:
$ (function () {var viewModel = new site.models.Gallery (); viewModel.init ($ (’ul.origin a’)); ko.applyBindings (viewModel);});
Hér búum við til breytu útsýniMódel, sem er nýtt eintak af sýnishorninu af Galleríi, og hringdu síðan í í því aðferð, með því að skila niðurstöðu DOM fyrirspurnar um alla hlekki innan lista yfir hluti okkar. Að lokum notum við Knockout aðferð til að beita gögnum í útsýni líkaninu á allar bindingar í sniðmátunum okkar. Sjálfgefið gildir það um líkami frumefni, en þú getur sent viðbótarrök sem miða hvar sem er á síðu DOM til að takmarka umfang bindingarinnar, til dæmis ef þú vilt mörg sjálfstæð sýnilíkön á einni síðu. Þegar þessu er lokið munu allar breytingar á útsýnislíkaninu endurspeglast strax í HÍ og öfugt.
Halda áfram
Á þessum tímapunkti ertu með vinnandi MVVM forrit, en að skoða það í vafra bendir á að það er ekki mjög myndasamt, því allt sem sniðmátið gerir er að fara í gegnum hlutina og birta myndir þeirra í röð. Við þurfum samt leið fyrir notandann til að geta séð hvaða mynd á listanum er valin og til að breyta valinu og síðast en ekki síst að sýna aðeins eina aðalmynd í einu!
Til að ná fyrri hluta þessa munum við nota meginregluna um að hægt sé að binda sömu gögn í DOM nokkrum sinnum og setja upp nýtt sniðmát fyrir smámyndarræmu:
div> ul data-bind = "foreach: itemsObservables"> li data-bind = "css: {'selected': isSelected}, smelltu: $ parent.select"> img data-bind = "attr: {'src': src} "width =" 140 "/> span data-bind =" text: caption "> / span> / li> / ul> / div>
Við búum til þetta með því að nota sömu forgjafarbindingu til að birta eins mörg atriði á listanum og það eru hlutir í áberandi fylkinu. Við erum líka að setja fram sömu mynd src og myndatexta aftur, en í öðru álagsmynstri sem sýnir sveigjanleika nálgunar útsýnislíkansins. (Ég nota skjálfta útgáfu af aðalmyndinni sem smámynd til að auðvelda, en ég myndi búast við að framleiðslusvæði hefði smámyndir í réttri stærð.)
Fyrsta bindingin á atriði smámyndarinnar er css: {’Valið’: erValið}, sem er notað til að beita CSS bekk með skilyrðum - það mun aðeins birtast á frumefninu ef erValið er satt og tilgreindu svo hlutinn sem er valinn. Þegar við bjuggum til GalleríLiður skoða líkan við gerðum þetta áberandi rangt sjálfgefið, þannig að í bili verður bekknum ekki beitt. The css binding hefur svolítið gagnvirkt nafn - það fjallar um flokka - en ef þú vilt binda einstaka CSS eiginleika geturðu líka notað stíl bindandi.
Til að gera þetta gagnlegt er líka nýtt hugtak á listalistanum; bindingu við $ foreldri.valið á smellviðburðinn. Ef þú notar Knockout til að meðhöndla atburði mun það hafa forgang fram yfir sjálfgefna DOM viðburðinn og einnig alla aðra hlustendur viðburða sem kunna að vera með þennan þátt, en þú getur sent stjórninni aftur til þeirra seinna ef þú þarft með því að skila sönnu úr aðgerðinni sem við ætlar að búa til.
The $ foreldri forskeyti aðgerðar verkefnisins er til staðar vegna þess að við erum í samhengi hlutarins GalleríLiður skoða líkan og með því að nota þetta getum við fengið aðgang að því foreldri skoða líkan, dæmi um Gallerí, og hringdu í aðgerð veldu - sem við munum skilgreina þar. Það gæti farið í GalleríLiður skoða líkan og vera kallaður beint (með því að nota data-bind = "smelltu: veldu"), en að gera það myndi þýða að búa til afrit af því með hverjum hlut og það er enn frekar kostur við að setja það stig upp.
this.select = virka (gögn, e) {self.setSelected (newSelection); e.preventDefault ();} this.setSelected = fall (newSelection) {ko.utils.arrayForEach (self.itemsObservables (), function (item) {item.isSelected (item == newSelection);});}
Reyndar eru tvær nýjar aðgerðir hér - veldu, sem sér um smellina og hringir síðan settValið, sem gerir í raun valið. Það er ekki nauðsynlegt að skipta hlutunum upp á þennan hátt, heldur með því að búa til sérstakt settValið aðferð við getum prófað það sjálfstætt án þess að þurfa að líkja eftir DOM atburði.
Viðburðatengingar Knockout veita tvö sjálfgefin rök. Fyrsti, gögn, er skyndimynd af því sem skotmark frumefni er bundið við; í þessu tilfelli viðkomandi dæmi um GalleríLiður skoða líkan. Sekúndan, e, er upphaflegi DOM viðburðurinn. Aðgerð okkar kallar settValið með þessu og kemur í veg fyrir sjálfgefna aðgerð. Þegar við smelltum á listaþátt í dæminu okkar er engin sjálfgefin aðgerð, svo það er í raun ekki nauðsynlegt, en ef við breytum sniðmátinu til að nota tengil mun það ekki ná okkur.
Við gætum einfaldlega stillt það erValið um nýja valið til satt, sem mun uppfæra notendaviðmótið samstundis - en allt fyrra val væri samt virkt, og ef við viljum takmarka notendaviðmótið okkar til að sýna eina aðalmynd í einu og einnig hafa vísbendingu í smámyndarræmunni þá væri þetta vandamál.
Til að koma í veg fyrir þetta förum við í gegnum öll dæmi um GalleríLiður í atriði Athuganlegt og berðu þá saman við nýja valið. Niðurstaðan af þessum samanburði er Boolean - rangur eða sannur - svo við getum framselt hann beint til erValið með því að kalla hina áberandi með samanburðinn sem rök. Þannig er aðeins hægt að velja eitt í einu og hlutinn sem er erValið stillt á satt mun nú fá CSS bekkinn valinn beitt. Þetta er líka þar sem kosturinn við að setja valrökfræði í aðalatriði Gallerí útsýnislíkan verður ljóst, því frá þessu stigi getum við auðveldlega stigið að einhverjum eigin eiginleikum - þar á meðal öllum hlutum í atriði Athuganlegt.
Lokanotkun fyrir erValið er í því skyni að stilla sýnileika aðalmyndanna með skilyrðum.
div data-bind = "foreach: itemsObservables"> div data-bind = "visible: isSelected"> ... / div> / div>
Við getum gert þetta með því að bæta við a sýnilegur bindandi við erValið á div.item. Þetta virkar með því að stjórna stíl frumefnisins beint, svo hvaða hlutur sem er erValið er rangt mun CSS skjáreglan vera stillt á enginn, og þegar útsýnislíkanið breytist mun sýnileiki hlutanna breytast.
Aftur, ef við skoðum í vafranum eru hlutirnir ekki alveg það sem við myndum búast við frá myndasafni. Venjulega er fyrsta myndin í settinu valin sjálfgefið, en eins og staðan er núna erum við að frumstilla öll þau atriði sem eiga að vera erValið stillt á rangt, svo engar stórar myndir sjást fyrr en notandinn velur eina. Til að koma þessu í kring, skulum við setja í aðalskoðunarlíkan init aðferðina erValið um fyrsta atriðið til satt svo það mun birtast.
this.init = virka (gögn) {var sjálf = þetta; ... this.itemsObservables () [0] .isSelected (true);}
Eins og að nota innri aðferðir Knockout (svo sem ýta, sem er sitt eigið frekar en hreinn JavaScript ýta) á atriði Athuganlegt fylki, við getum líka kallað það með () og opnaðu síðan eitthvað af hlutunum eins og við myndum gera venjulegt fylki. Við úthlutum reglum til athuganlegra gilda með því að kalla þau með gildið sem rök, svo nýja línan í í því aðgerð setur nú erValið í fyrsta atriðinu í athuganlegu fylkinu til satt.
Að láta það passa
Núna höfum við lágmarks en hagnýtt myndasafn. Aðeins ein mynd úr setti er sýnd í einu og þar er birt smámyndir sem notandinn getur smellt á til að velja hver birtist.
Þú munt þó taka eftir því að með aðalmyndunum stillt 800px breitt, smámyndarröndin flæðir yfir þeirri breidd - eða getur jafnvel pakkað, allt eftir stærð vafrans. Það væri betra ef við gætum takmarkað breidd ræmunnar við stærð myndarinnar og látið hana fletta til vinstri eða hægri eftir því hvar úrvalið er. Auðvitað, the 800px er handahófskennd tala fyrir þetta kynningu. Það gæti verið af hvaða stærð sem er, eða jafnvel móttækilegt, en að takast á við þessar tegundir aðstæðna er þar sem Knockout kemur raunverulega til sögunnar.
Það þarf fullt af nýjum athuganlegum hlutum til að bæta þessari hegðun við HÍ, þannig að við búum til alveg nýtt útsýnislíkan, ScrollableArea, að geyma og fylgjast með þeim - og verpa þetta innan meginskoðunar líkans okkar þegar við skilgreinum það.
site.models.Gallery = virka () {var sjálf = þetta; this.itemsObservables = ko.observableArray (); this.measureContent = null; this.scrollable = ný staður.models.ScrollableArea (); ...}
Það er önnur ný eign hér að nefna, mæla Innihald. Þú munt sjá að það er stillt á núll og er í grundvallaratriðum staðhafi fyrir aðgerð sem við munum skilgreina í skjá tilbúnum kóða, svo við getum nýtt okkur nokkrar jQuery aðgerðir án þess að fá það bundið í ramma-agnostic útsýni líkaninu okkar. Allt annað að gera með aukna virkni okkar mun fara í ScrollableArea skoða líkan.
site.models.ScrollableArea = function () {var sjálf = þetta; this.scrollThreshold = ko.observable (0); this.contentSize = ko.observable (0); this.scrollValue = ko.observable (0); this.scrollClickStep = ko.observable (400); this.isScrollable = ko.computed (function () {return self.contentSize ()> self.scrollThreshold ();});}
Fyrsti klumpurinn af athuganlegum hér fylgist með stöðu HÍ. flettu þröskuldi er heildarbreidd myndasafnsins. Í reynd verður þetta 800 en þetta er almenn skoðunarlíkan svo við frumsetjum það í 0; raunveruleg stærð er hægt að senda inn á meðan skjal tilbúin aðgerð. contentSize er aftur frumstillt til 0, og þetta verður mæling á heildarbreidd allra smámyndahluta. Seinna meir munum við bera saman þessi gildi til að sjá hvort smámyndasvæðið ætti að fletta eða ekki.
Næst er scrollValue, þetta er skrá yfir hvar „vinstri“ staða smámyndarinnar ætti að vera og aftur sjálfgefið 0. Að lokum, skrunClickStep er stilling fyrir hversu mikið ætti að færa smámyndarremsuna þegar við förum til vinstri eða hægri og fyrir kynningu okkar er hún sjálfgefin 400 (pixlar).
Eftir þetta förum við yfir í snjallt efni, þar sem kraftur Knockout kemur í raun í ljós. Hingað til höfum við tekist á ko.observable og ko.observableArray, en það er þriðja tegundin sem hægt er að sjá, ko.reiknað, sem getur horft á fjölda annarra athuganlegra og mun skila reiknuðu gildi byggt á þeim hvenær sem eitthvað af þeim breytist. Þetta geta ýmist verið skrifvarnar útreikningar eða tvíhliða lestrar / skrifaðgerðir.
Frekar en að búa til erSkrollanlegt með einföldu gildi, köllum við það í staðinn með falli sem í þessu tilfelli skilar samanburði á tveimur fyrri athuganlegum okkar, contentSize og flettu þröskuldi, til að komast að því hvort heildarbreidd smámyndarremsunnar er meiri en það pláss sem við höfum til að sýna hana í. Við upphafstíma eru bæði þessi gildi 0, svo það verður rangt - ekki hægt að fletta því - en um leið og við mælum DOM og setjum nokkur raunveruleg gildi þar mun það sjálfkrafa endurreikna og hvað sem er í sniðmátinu sem er bundið við þetta reiknað áhorfandi mun svara. Hagnýta leiðin til þessa er að lengja skjal tilbúna aðgerðina sem við notum nú þegar til að setja upp aðalskoðunarlíkanið:
$ (function () {var viewModel = new site.models.Gallery (); viewModel.init ($ ('ul.origin a')); ko.applyBindings (viewModel, $ ('body'). fá (0) var; c = $ ('div.controller'); viewModel.measureContent = aðgerð () {skila c.find ('li'). breidd () * c.find ('li'). lengd;} viewModel .scrollable.contentSize (viewModel.measureContent ()); viewModel.scrollable.scrollThreshold (c.width ());});
Nú höfum við bætt við breytu c, sem skyndiminni DOM fyrirspurn fyrir frumefnið sem inniheldur lista yfir smámyndir. Aðgerðin viewModel.measureContent (mundu að við bjuggum til þetta sem núllaðgerð á Gallerí skoða líkan fyrr) er nú skilgreint sem einfaldlega að skila pixla breidd fyrsta lista hlutar í stýringunni margfaldað með fjölda atriða, til að gefa heildarstærð ræmunnar. Það er áhættusamt að treysta á að allir hlutirnir séu í sömu breidd en fyrir þetta kynningu mun það gera.
Þessi aðgerð er notuð til að stilla gildi þess sem sést flettanlegt. flettu þröskuldi. Athugið að við getum stillt gildi beint á hreiðrað stig útsýnislíkansins, vegna þess að dæmi um ScrollableArea var skilgreind sem opinber aðferð og athuganlegar hennar eru einnig opinberar. Við settum líka flettanlegt. flettu þröskuldi að breidd ílátsins sjálfs. Það er mikilvægt að stilla þessi gildi eftir að útsýnislíkanstengingum hefur verið beitt á DOM, til að ganga úr skugga um að við séum að mæla niðurstöðuna að fullu en ekki tóm sniðmát.
Að breyta gildi annarrar þessara athuganlegu mála veldur erSkrollanlegt sjáanlegt að vera endurreiknaður og ef efnisstærðin er nú breiðari en það pláss sem við höfum í boði mun það verða satt.
div> ul data-bind = "foreach: itemsObservables, style: {'width': scrollable.contentSize () + 'px'}"> ... / ul> button data-bind = "sýnilegt: scrollable.isScrollable, virkja : scrollable.canScrollLeft, smelltu: scrollable.scrollContent "data-direction =" left ">« / button> button data-bind = "sýnilegt: scrollable.isScrollable, virkja: scrollable.canScrollRight, smelltu: scrollable.scrollContent" gagnastefna = "hægri"> »/ hnappur> / div>
Að nýta sér erSkrollanlegt í HÍ munum við einnig breyta sniðmátinu fyrir smámyndir. Þú munt sjá að það er til stíl bindandi á listann til að stilla breidd hans við fyrri útreikning okkar; þetta er til að ganga úr skugga um að heildin sé lögð á eina línu þó að ílát þáttur verður að vera takmarkaður í breidd með flæða: falið beitt. Restin af sniðmátinu er sú sama og áður en við höfum líka bætt við tveimur takki þættir, sem báðir hafa a sýnilegur bindandi við erSkrollanlegt. Þú getur líklega fundið út hvaða áhrif þetta hefur; hnapparnir verða stilltir til að sýna: enginn þar til er Flettanlegt verður satt og á þeim tímapunkti birtast þeir sjálfkrafa á sjónarsviðinu.
Það er líka gera kleift bindandi á þessa hnappa. Ég mun ekki fara út í smáatriði reiknaðra athuganlegra athugana sem reikna hvort þær séu sannar eða rangar, en þær innihalda rökfræðina sem ber saman núverandi flettistöðu við möguleg hámarks- og lágmarksgildi og kemur í veg fyrir að notandinn fletti til vinstri í vinstri enda smámyndarremsunnar, og öfugt.
Að lokum hafa hnapparnir einnig a smellur að binda við aðgerðina scrollContent, sem bætir eða dregur upphæð skrunskrepsins að núverandi skrunagildi eftir því hvaða stefnu er smellt. Þetta setur að lokum annað reiknað sem sést á ScrollableArea skoða líkan, calculatedScrollValue.
this.calculatedScrollValue = ko.computed ({read: function () {return (self.isScrollable ())? self.scrollValue (): 0;}, skrifaðu: function (gildi) {self.scrollValue (gildi);}} );
Hér er dæmi um tvíhliða reiknað áhorfandi, sem inniheldur afturköllunaraðgerðir til að lesa og skrifa gildi. Í lesa virka það mun bregðast við breytingum á erSkrollanlegt, en ef við köllum það með gildi í rökunum þá er skrifa aðgerð er virkjuð til að stilla scrollValue, sem við getum notað í a stíl bindandi á sniðmátið til að staðsetja smámyndarröndina.
Klára
Nokkuð mörg hugtök hafa verið kynnt fljótt í þessu kynningu og þér yrði fyrirgefið ef sum þeirra hafa gert meira til að rugla saman en lýsa. En vonandi hefur þú séð einhvern ávinninginn af því að nota MVVM mynstur og ert áhuga á að lesa þér til frekar um það. Eins og við sögðum í upphafi eru skjölin og námskeiðin á Knockout síðunni frábær og vel þess virði að vinna úr því.
Það er allt meira dýpt í því líka, þar á meðal sérsniðnar bindingar sem geta tengst beint við jQuery eða áhrifaaðferðir annarra bókasafna. Svo frekar en einfalt sýnilegur bindandi þú getur skilgreint þitt eigið hverfa Sýnilegt að láta þætti birtast og hverfa með aðeins meiri stíl en bara að skjóta inn eða út eða skoða.
Lykilatriðið sem þarf að muna er að í öllu því sem lýst er höfum við stefnt að því að viðhalda hreinum aðskilnaði HÍ og rökfræði. Þannig að við gætum alveg skipt um útsýnið, svo framarlega sem bindingarnar væru fluttar, og það myndi allt virka enn.
Það eru auðvitað óteljandi, verulega fleiri lögun ríkir, gallerí viðbætur til staðar fyrir hvaða JavaScript ramma sem þú vilt nefna. En þetta er aðeins upphafspunkturinn í Knockout-knúnu galleríinu okkar og fyrir mér er kosturinn við að gera það á þennan hátt að þú endar með þéttan en samt stækkanlegan stjórnanda í formi útsýnislíkansins, sem hægt er að beita á hvaða HÍ sem er án þess að þurfa að hafa áhyggjur af því hversu fallega það mun spila með núverandi síðu þinni.
Þetta er endurskoðuð, stækkuð útgáfa af grein sem fyrst var birt á 12devsofxmas.co.uk
Uppgötvaðu 101 CSS og JavaScript námskeið til að efla færni þína hjá Creative Bloq.
