Ažurirano: "MakeNode" Widget Proširenje
12. rujan 2011 u 15:18 od Satyam | U razvoj , YUI 3 Galerija | 6 Komentari U moj prethodni članak, recept za YUI 3 Primjena sam pokazao način korištenja Y.substitute kao vrlo osnovni predložak procesor. Ideja je život od tamo, s prijedlozima iz ljudi u # YUI IRC kanal, i ja napravio je dodatak proširenje koji je dostupan na YUI Galerija, zove MakeNode . MakeNode nije generički predložak procesor i nije zamišljena kao jedan. S druge strane, to je čvrsto integrirana s YUI Widget temelj klase, uključujući className i event pomagača, ali i internacionalizaciju. U ovom članku, ja ću uzeti Spinner primjer i mijenjati da slijedite smjernice iz mog prethodnog članka i za korištenje MakeNode. MakeNode je dostupan u galeriju komponentu, kao i promjene Spinner komponente i primjer koji će se koristiti u ovom članku .
Proširenje vaše komponenta
Za učitavanje MakeNode morate uključiti modul u svoj YUI().use() izjavu koristeći naziv 'gallery-makenode' ili, ako je definiranje modula preko YUI.add() , to popis kao requires niz. Zatim, kako bi produžili Vaše widgeta, možete ga popis u trećem argument Y.Base.create() , kao što je ovaj:
Y. Spinner = Y.Base.create ( "Spinner", Y. dodatak, [Y. MakeNode], { / / Primjer članova ... }, { / / Statički članovi } );
Možete dodati MakeNode uz bilo koji broj odgovarajućih ekstenzije za widgeta, kao što su WidgetParent, WidgetChild, WidgetStdMode, itd. MakeNode dodaje dvije zaštićene metode koje se koriste od strane developer, _makeNode i _locateNodes, a ona će pročitati nekoliko statička svojstva, ako se utvrdi .
Svi članovi ovog proširenja su ili zaštićeni ili privatna jer su trebali biti korišteni od strane komponente programer a ne nositelj korištenja tih dijelova, koji ne bi trebao biti gnjaviti s njima. Ne zaboravite da provjerite "Show zaštićeni" opcija kada gledate API dokumente .
Definiranje predložaka
Prva stvar koju će normalno raditi je definirati predložak za komponentu. Za Spinner, naš predložak će biti:
_TEMPLATE: [ '<input Type="text" title="{s input}" class="{c input}">', '<button Type="button" title="{s up}" class="{c up}"> </ tipka>', '<button Type="button" title="{s down}" class="{c down}"> </ tipka>' ]. Pridružiti ('\ n'),
Zadani predložak će obično biti imenovan _TEMPLATE i proglasio uz ostale statička svojstva klase, kao što su ATTRS . MakeNode će koristiti ovaj predložak ako nitko drugi izričito određeno. Predložak je napravljen od običnog HTML-a te niz rezerviranih mjesta zatvorena u vitičastim zagradama, svaki od jednog znaka (kod obrade), a zatim jednu ili više argumenata. The rezerviranih mjesta i ono što oni proizvode su:
{@ attributeName}konfiguracije vrijednosti atributa{p propertyName}primjer vrijednost imovine{m methodName arg1 arg2 ….}povrat vrijednosti danog metode. Obrada kod je nakon metoda ime i bilo koji broj argumenata odvojenih razmakom.{c classNameKey}CSS className generirana od_CLASS_NAMESstatičke imovine (vidi The _CLASS_NAMES imovine odjeljak u nastavku){s key}niz odstringsatribut, koristećikeykao pod-atribut.{? conditionvalueIfTrue valueIfFalse }slično?:operator JavaScript, procjenjuje sevalueIfTrueako uvjet je truish,valueIfFalsedrugačije.{1 condition valueIfOne valueIfMore }koristi za proizvodnju jednine / množine riječi na temelju vrijednosti stanja.{}bilo koja druga vrijednost će biti obrađene kaoY.substitutene.
Na primjer, {@ value} će se prevesti na this.get('value') , a {p value} prevodi za this['value'] .
Kada rezerviranih mjesta imaju argumente, kao {m} , {?} i {1} , žice moraju biti priloženi u dvostruke navodnike. Brojevi, Booleovih varijabli i null (svi uvršteni na burzu) će biti analiziran u svoje odgovarajuće tipove podataka. Placeholders može biti ugniježđena. The {?} i {1} rezervirana mjesta obično će sadržavati ugniježđena rezervirano za uvjet, a vrlo vjerojatno za svoje vrijednosti, na primjer:
{P} {1 Kol {p} Kol "jedinica", "jedinica"} Ako je svojstvo qty 1, to će ocijeniti da "1 unit" , za 2 ili više će se vratiti "2 units" i tako dalje. Više razraditi verzija koja se bavi nula bi biti:
{? {P} Kol "{p} {1 Kol {p} Kol" jedinica "," jedinica "}" "None"}
Imajte na umu da je rezultat obrade unutarnjih rezerviranih mjesta, ako je niz, mora biti zatvoren u svoj vlastiti skup citati.
Da biste uključili dvostruke navodnike unutar citirani niz, koristite \\" , dvostruki backslash se traži, jer će tumačiti JavaScript jednog i odbacuje prije nego što ga dobiva MakeNode Samo dvostrukim navodnicima su dozvoljeni;. MakeNode ne koristi eval() , tako the parser je ograničen, ali sigurno. ništa, ali brojevi, null , Booleovih varijabli i dvostruko citirani nizovi će biti zanemaren.
The {?} rezervirano je također zgodan za korištenje s potvrdne okvire i gumbe. Ona se može koristiti za proizvodnju string "checked" , ovisno o istini vrijednosti kod obrade koja slijedi upute. Dakle, <input type="checkbox" {? {m getLength} "checked" ""}/> <input type="checkbox" {? {m getLength} "checked" ""}/> će proizvesti označen potvrdni okvir ako getLength metoda vraća ništa, ali nula.
Za {c} rezervirano mjesto, moramo imati _CLASS_NAMES nekretnina definiran.
Daljnje rezerviranih mjesta mogu biti dodan u MakeNode tako da ih dodate u _templateHandlers mljeveno meso.
_CLASS_NAMES Imovine
Uz ATTRS i _TEMPLATE statička svojstva, možemo definirati _CLASS_NAMES statički svojstvo koje ukazuje na niz žica. Svaki od tih nizova će se koristiti za generiranje className. Tako _CLASS_NAMES: ['input'] će proizvesti className "yui3-spinner-input" . Oni classNames su pohranjeni u slučaju vlasništva this._classNames . The {c input} rezervirano mjesto u predlošku gore će biti zamijenjen "yui3-spinner-input" . Pozivam konce navedene u _CLASS_NAMES , kao što su 'input' , je "className tipke", budući da se može koristiti kao ključ odnosi se na stvarni className ili elementi koji sadrže te classNames, kao što ćemo vidjeti kasnije.
Možete koristiti _CLASS_NAMES imovine generirati bilo koji broj classNames, da li ih koristite u predlošku ili ne. Još uvijek možete doći do tih dodatnih classNames iz this._classNames . The className je generirana koristeći yui3 prefiks slijede vrijednosti NAME statičke imovine okrenuo malim slovima, a zatim niz dane u _CLASS_NAMES (ovaj posljednji neće biti okrenut malim slovima), a sve odvojene crticama. _classNames hash će također sadržavati classNames za boundingBox i contentBox , prvi put pod "boundingBox" tipku i drugi pod "content" tipku. Dodatak dodjeljuje na boundingBox the classNames proizlaze iz vrijednosti NAME imovine svake od klasa u baštinu lancu, počevši s yui3-widget . MakeNode pohranjuje u this._classNames samo top-najviše className za boundingBox .
Ako WidgetStdMod modul učitan, MakeNode također će generirati unose za HEADER , BODY i FOOTER sekcije s tim istim tipkama, koji su također konstante definirane u tom istom modulu.
Ako komponenta je nekoliko razina od widgeta, kao što su SuperSpecialSpinner nasljeđuje od SuperSpinner koje nasljeđuje od Spinner koje nasljeđuje od Widget, i ako bilo koju ili sve od njih imaju _CLASS_NAMES svojstva definirana, MakeNode će proizvoditi classNames za sve njih i pohraniti ih u this._classNames . Ne morate uključiti na svakoj razini imena već proglašena u prijašnje razine. U stvari, to je bolje da ne jer classNames proizvedene na svakoj razini će koristiti vrijednost NAME imovine te razine. Dakle, u SuperSpecialSpinner , {c input} i dalje će rezultirati u "yui3-spinner-input" , a ne "yui3-superspecialspinner-input" i tako će zadržati svoje CSS datoteke još uvijek vrijedi.
{E} rezerviranog mjesta
Widget ima strings atribut konfiguracije definiran, iako nije inicijaliziran s bilo vrijednosti. Ovaj atribut je značilo da drže žice koje su vidljive na (ili preko čitača zaslona, pročitao) korisnika. Važno je da se nikada ne uključuju vidljive žice izravno u predložak. Ovo nije zahtjev MakeNode - ona nikada nije bila dobra ideja uopće. Sve žice koje će biti pregledan od strane ili pročitati korisniku uvijek trebali biti smješteni u strings atribut. The strings atribut sadrži ljestve gdje svaki pojedinac tekst se nalazi na tipku. The Spinner komponenta ima sljedeće žice, koje možete vidjeti koristiti u predlošku gore.
žice: { Vrijednost: { ulaz: ". pritisnite strelicu gore / dolje tipke za manje koracima, stranica gore / dolje za velike koracima", gore: "Povećanje", dolje: "opadanje" } },
Najbolji dio to je da komponenta može biti lokaliziran na drugim jezicima vrlo lako programeri pomoću komponentu. Prilikom stvaranja primjer Spinner, možete učiniti:
var mySpinner = new Spinner ({nizova: Y.Intl.get ("pauk')}); Postavljanje konfiguracije atribut strings na taj način zamjenjuje zadane strings vrijednosti s onima iz datoteke jezika resursa koristeći jezik prethodno definirani. The {s} rezervirano mjesto pristupa žice pohranjene u strings atribut, ili zadani one ili prevedeno sebe, ako je postavljena. The {s xxxx} rezervirano je gotovo poput korištenja {@ strings.xxxx} osim da je lokaliziran zamjena stringova mogu imati rezervirana mjesta koja će se dodatno obraditi. To je važno za prijevode od sintaktičke kako varira od jezika do jezika, a to omogućuje parafrazirajući tekst, uključujući i rezervirana mjesta tako da odgovaraju bilo kojem jeziku. Nizovi se može pristupiti putem {@ strings.xxxx.yyyy.zzzz} , koji će omogućiti pristup konce ugniježđeni dublje dolje i da će spriječiti daljnje zamjene. Vitičastih zagrada mogu biti uključeni u tekst pomoću {LBRACE} i {RBRACE} kao rezervirana mjesta.
Korištenje _makeNode u renderUI
Mi koristimo predložak za stvaranje oznake za naše komponentu. Da biste to učinili, možemo nazvati MakeNode je _makeNode metode, kao što je ovaj:
renderUI: Funkcija () { . this.get ('contentBox') dodati (this._makeNode ()); },
To će ispuniti contentBox naše widget s markup iz obrade obrasca. The _makeNode metoda vraća instancu Y.Node koji se mogu dodati ili umetnuti bilo gdje ili samo drže za kasniju uporabu. To se ne vraća string, on stvara Node primjer. (Ako vam je potrebna, a ne niz čvor, možete koristiti _substitute metoda, koja zahtijeva da prođe u predložak.)
The _makeNode metoda uzima dva dodatna argumenta: referenca na predložak i objekt ispuniti u rezervirana mjesta, kao i Y.substitute ne. U našem jednostavnom primjeru Spinner postoji jedan predložak za cijelu widget ali drugi dodaci mogu zahtijevati bitova i komada napravljen od nekoliko predložaka. U tom slučaju, obično bi se nazvati _makeNode bez argumenata za glavnu ulogu i pozvati ga ponovno s različitim predlošcima ispuniti dodatni dijelovi. Primjer sadrži ovaj renderUI način:
renderUI: Funkcija () { var fieldset = this._makeNode (); this.each (funkcija (točka) { fieldset.appendChild (this._makeNode (MultipleTemplates.RADIO_TEMPLATE, točka)); }, To); . this.get ('contentBox') dodati (fieldset); }
Prvi poziv na _makeNode vraća Node primjer spremljena u varijabli fieldset . Uzorak komponenta je također proširena s Y.ArrayList tako RADIO_TEMPLATE će biti ispunjen s vrijednostima preuzet iz stavke pohranjene u polju popis i što je rezultiralo čvorovi dodan na fieldset prije nego što konačno dodaje do contentBox . Posebna rezerviranih mjesta, kao što su {@} ili {p} i dalje će se odnositi na atribute ili svojstva u glavnom objektu. Ugniježđena stavke će biti obrađen kao Y.substitute bi.
The _locateNodes metoda
MakeNode dalje pruža _locateNodes metodu koja će pokušati pronaći sve elemente s classNames proglašen u _CLASS_NAMES . Da biste pronašli određene elemente možete proći bilo koji broj className tipki, inače, _locateNodes nastoji ih sve. Za svaki element nalazi svakog className, _locateNodes će proizvoditi privatne imovine primjer koristeći donju prefiks slijedi ključ ime i "Node" sufiks. Dakle, u našem primjeru Spinner, _locateNodes će generirati svojstva _inputNode , _upNode i _downNode . Ako je nekoliko elemenata imaju isti className, _locateNodes će se vratiti referencu na prvu od njih. Ako element nije pronađen, ne varijabla će biti kreirana.
U Spinner komponente koristimo _locateNodes nakon stvaranja obilježja:
renderUI: Funkcija () { . this.get (CBX) dodati (this._makeNode ()); this._locateNodes (); },
_EVENTS Statički imovine
Jedan dodatno svojstvo može definirati na tragu _TEMPLATE i _CLASS_NAMES i da je _EVENTS . _EVENTS će sadržavati hash sastavljena od imena klase ključeva, od kojih svaka sadrži mljeveno meso događaja vrste i način da ih obrađuju. To je bolje objasniti primjer:
_EVENTS: { ulaz: 'promjena', / / poziva this._afterInputChange boundingBox: [ { Vrsta: 'ključ', fn: '_onDirectionKey', / / poziva this._onDirectionKey args: ((Y.UA.opera) "dolje":? "press") + "38, 40, 33, 34" }, 'Mousedown' / / poziva this._afterBoundingBoxMousedown ], dokument: 'mouseup', / / poziva this._afterDocumentMouseup, Y: "broadcastingObject: someEvent '/ / to naziva [" _afterYBroadcastingObject: someEvent "] },
_EVENTS je objekt (ljestve) s bilo kojeg broja prijava. Imena svojstva, da je, tipke za mljeveno meso, identificirati čvorova čija događaja ćemo slušati. Oni su isti className ključeve definirane u _CLASS_NAMES . Postoji nekoliko ekstra posebne tipke:
"boundingBox"će se odnositi na granični okvir sama."document"se odnosi na dokument koji sadrži ovaj widget."THIS"odnosi se na widget se"Y"se odnosi naYprimjer.
Ako je Widget je proširena s WidgetStdMod te, tipke HEADER , BODY i FOOTER će se odnositi na one dijelove, budući da će biti dostupan u _classNames mljeveno meso. JavaScript ne treba tipke biti citirani ako su valjani identifikatori, pa nitko od gore navedenih je potrebno navesti.
The _EVENTS imovine je obrađena nakon renderUI , bindUI i syncUI metode su pozvani tako widget se očekuje da će već biti umetnuta u tijelo dokumenta, inače "document" identifikator neće uspjeti.
Za svaki od tih elemenata je događaj identifikator ili niz događaja identifikatora. Događaj se mogu prepoznati po vrsti događaja slušati ili objekt s više pojedinosti. Po defaultu, MakeNode će koristiti kao slušatelj metoda zove pomoću "_after" prefiks slijedi element identifikator sa svojim prvim znakom slovom slijedi vrste događaja s prvim znakom slovom. Kod blok iznad pokazuje metoda naziva za svaki događaj.
Identifikator događaj također može biti objekt sa svojstvima type , fn i args . The type je obvezno i ukazuje na vrstu događaja kao slušali. The fn imovine daje naziv metode koja će slušati događaja čime se izbjegava automatske imenovanja. Budući da _EVENTS je statički imovine, ona nema pristup this tako da se ne može uzeti stvarni odnosi na metodu, samo svoje ime. The args argument se može koristiti da prođe dalje argumente pozivatelja, kao što s key događaj koji zahtijeva specifikaciju ključeva.
MakeNode će koristiti Node.delegate za slušanje događaja na elementima unutar boundingBox , a ona će se koristiti Node.after slušati na događaje iz boundingBox i tijelo dokumenta. Ona će se koristiti this.after slušati na događaje pod THIS ključ i Y.after za slušatelji navedene pod Y tipku. Sva događanja su slušali koristiti nakon događaja slušateljima jer su značilo da bi widget reagirati na događaje, a ne za filtriranje ponašanje objekta koji požari ih tako ni u kojem slučaju ovih događaja može se spriječiti ili zaustaviti. (Napomena: slušanje key događaj na bilo smješteno elementu radi samo sa verzijom 3.4.0pr1 i gore, jer delegacija key događaja nije bio dostupan prije svih drugih mogućnosti rada s prethodnim verzijama, kao dobro.).
_EVENTS deklaracije kumulativni kad komponente naslijediti jedan od drugog. Svaki razred u nasljedstvo lanac će imati svoje vlastite _EVENTS izjavu obrađeni odvojeno.
_ATTRS_2_UI Statički imovine
Događanja ići u oba smjera, od UI do komponente i od komponentu UI. Prvi su obrađene od strane _EVENTS imovine. Zatim tu su zbivanja ispalio vrijednost atributa promjene koje je potrebno da se ogleda u korisničkom sučelju. Kao što sam spomenuo u prethodnom članku, kada postoje sekundarne učinke da mijenjaju konfiguraciju atribut, oni bi trebao biti obrađene od strane promjenu događaj slušatelja, a ne dodatni setter način atributa, koji samo treba baviti normalizaciju vrijednosti se postavlja. UI treba odražavati stanje konfiguracije atributa, prvi u syncUI , kada se inicijalizirati i onda na svaki događaj atribut promijeniti. Za potonje, trebamo priložiti događaj slušatelj, koji mi inače učiniti u bindUI . Dodatak već pruža mehanizam da bi tako jednostavno, što sam opisao u svojim komentarima na prethodni članak.
Dodatak koristi primjer imovine _UI_ATTRS koja sadrži objekt s dva dodatna svojstva, SYNC i BIND . Svaki od njih je polje s popisom imena konfiguracije atribute u početku biti usklađene, a zatim je slušao kako bi UI odražava trenutne vrijednosti. Dodatak očekuje svaki od tih unosa imati metodu povezane s njom, nazvana po imenu atributa prefiksom po _uiSet s prvi znak imena atributa pretvaraju u velika slova da metoda ime u odgovarajuće deve slučaju. Dakle, ako "value" je uvršten u bilo kojem od _UI_ATTRS polja (u bilo SYNC ili BIND ), dodatak bi se očekivati da će pronaći _uiSetValue metoda. Ova metoda će dobiti dvije argumente, value se postavlja i src promjene. Ovo je kod za naše Spinner _uiSetValue način:
_uiSetValue: funkcije (vrijednosti, SRC) { if (SRC === UI) { povratak; } this._inputNode.set (vrijednost, this.get (FORMATTER) (vrijednost)); },
Svi velikih oznake koje vidite na ovaj komad koda odgovarati string konstante proglašen negdje drugdje, kako bi se omogućilo YUI kompresor raditi svoj posao bolje. Metoda, u osnovi, postavlja value HTML atributa u <input> okvir za novu vrijednost postavljena, nakon što je oblikovan. Pozivanje na kućicu dao je _locateNodes . The src argument u početku se provjerava da vidi ako je postavljen na vrijednost niza 'ui' . Ako je to tako, ne akciji će se poduzeti. Time se izbjegava beskrajne petlje. Ako korisnik unese nešto u okvir za unos, njegova vrijednost će ići u value atribut konfiguraciju koja bi tada vatra valueChange događaj, koji će dobiti _uiSetValue naziva koje, ako ne označenim, onda će ići i promijenite vrijednost okvira za unos, koji se će pokrenuti cijeli proces ponovno. Dakle, u _uiSetValue , ako znamo promjenu dolazi iz UI, možemo učiniti ništa i tako razbiti petlje. Međutim, to zahtijeva još jedan komad koda drugdje. U slušatelja za DOM slučaju, kada smo postavili konfiguracije atribut, mi koristimo treći dodatni argument za postavljanje, kao što je ovaj:
_afterValueChange: funkcija (EV) { this.set (vrijednost, ev.newVal, {src: UI}); }
To je na nama da bi se osiguralo da promjene dolaze iz UI su označene tako, a zatim provjerite da istu zastavu kako bi se izbjeglo petlje. Nemojte koristiti identifikator src pri određivanju vrijednosti atributa, a ne source koji neće biti priznata.
Uz sve to rekao, nisam još razgovarao o statički nekretnine _ATTRS_2_UI spominje u naslovu ovog poglavlja. Kao komentare na moj prethodni članak pokazuje (putem zabluda sam napravio u njima), pazeći da svi atributi koji utječu na UI pravilno su navedeni je nešto neuredno. Vi nikada ne treba inicijalizirati _UI_ATTRS ispočetka jer Widget već navodi cijeli niz obilježja i onih će biti izgubljeni. Morate spojite novi atribut imena preko postojećih, što je nešto teško zapamtiti kako to učiniti pravu. Da bi se jednostavno, MakeNode će pročitati od statičkog imovine _ATTRS_2_UI i to ulančavanje za vas. To će spojite sve takve popise iz svake klase u baštinu lanac tako na svakoj razini svake klase može nositi svoje atribute. U Spinner, imamo:
_ATTRS_2_UI: { BIND: VALUE, SYNC: VALUE },
MakeNode će prihvatiti i niz imena ili jedan atribut ime, kao u ovom slučaju.
Postavlja se pitanje prirodno postavlja, zašto dvije liste, jedna za vezivanje drugi za sinkronizaciju? SYNC se koristi prvi put okolo, nakon renderUI i bindUI metode, ako postoje, nazivaju se i prije syncUI dok su oni navedeni u BIND će biti dužan odgovarajuće atribute za kasnije promjene. Vrlo često SYNC polje ima manje upisa nego BIND popis i to je zato što je predložak za komponentu možda već imaju iste zadane vrijednosti kao i konfiguraciju atribut i nema potrebe za napraviti početnu sinkronizaciju. Dakle, ako zadana vrijednost za value atributa konfiguracija je prazan string i <input> element u predlošku nema value atributa, onda nema potrebe da ih sinkronizirati na inicijalizacije.
Atributi su navedene u BIND će imati svoje _uiSet Xxxx metoda zove u bilo kojem redoslijedu, kao i atributi mogu se postaviti u bilo kojem redoslijedu. Atributi su navedene u SYNC će biti pozvani jednom u redoslijedu u kojem su navedeni s tim predaka prije nasljednici, pa ako je netko ovisan o drugom (koji oni ne bi trebali), red bi moglo biti važno.
MakeNode će provjeriti za dvostruke unose u bilo kojem od tih polja. Ako se, to znači da klasa naše komponenta nasljeduje od već rješava taj atribut i neke nove izjava najvjerojatnije prekoračivati _uiSet Xxxx rukovatelj za to. Usput, MakeNode također provjerava za dvostruke unose u _CLASS_NAMES , koji također može izazvati sukob u nekim, iako ne sve, okolnostima. MakeNode će napisati poruku prijavite za bilo koje takve pogreške.
_PUBLISH Imovine
Konačno, _PUBLISH statički nekretnina će se popis onih događaja koji moraju biti objavljeni. Sadrži hash koristeći naziv događaja kao tipke i doslovno objekt konfiguracije atribute kao svoje vrijednosti. To će objaviti sve događaje navedene u takve imovine u svim baštinu lanca. Isti događaj ime može biti objavljen u razredu i na bilo koji klase nasljeđuju od njega, koji će konfiguraciju atribute kasnije one nadjačati one u stare. Na primjer, možda želite da postojeći događaj emitirati na globalnoj razini. Baš kao i kod _EVENTS imovine, budući da _PUBLISH je statički vlasništvo bez pristupa this , prilikom određivanja funkcije, to je naziv metode, kao niz, koji treba dati.
Zaključak
MakeNode pruža vrlo jednostavan predložak procesor, s funkcije koje visoko je integriran s razredom Widget temelj. Ona također pruža pomagač metode za stvaranje classNames će se koristiti u predlošku i koristiti one nazive za pronalaženje i odnose se na čvorove stvorio. To također osigurava sredstva za spojiti na događaje generirane od strane oba UI i komponente sam i suradnik svaka s metodom. To se sve ove stvari, a vodeći računa da poštuje baštinu lanac ravno do widget i bilo kojoj razini nastave možete definirati.
To ne pruža za apsolutno sve mogućnosti, ali pokriva dobar raspon od njih. Ipak, to vas ne sprečava od dodavanja dodatnih funkcionalnosti. Vi rijetko možda ćete morati napisati bindUI ili syncUI metodu ako koristite ljepilo koje MakeNode, ali možete to učiniti, budući da MakeNode ih ne koristite.
Kao bonus za one koji su imali strpljenja pročitati ovo do sada, imam i promjene Antuna zemljano lonče je skupu gumbiju galerije komponenti i napravio harmoniku i TimeSpinner komponente, sve dostupne u galeriji .
Udio i proširiti: Bookmark s del.icio.us | digg it! | reddit!
6 Komentari »
RSS feed za komentare na ovaj post. Trackback URI
Ostavite komentar

Copyright © 2006-2011 Yahoo! Inc Sva prava pridržana. Izjava o privatnosti - Uvjeti pružanja usluge
Powered by WordPress na Yahoo! Web hosting .


Hm, vau. Na kraju je kroz ovaj članak, a ja sam nestrpljiv da isprobate galeriju modula. Čini se kao * puno * skele koje nisam siguran je super za programere novi YUI bez da su u rovovima prvi, ali ja sigurno mogu vidjeti kako se to može skratiti neke vrlo ponavljaju kod, posebno za one od nas koji su već staviti naše vrijeme u :-).
Ja sam znatiželjan o sljedeću izjavu: "_EVENTS imovine je obrađena nakon renderUI, bindUI i syncUI metode su pozvani tako widget se očekuje da će već biti umetnuta u tijelo dokumenta, inače" dokumenta "identifikator neće uspjeti." Općenito widget biće donesena ne znači nužno da je u DOM, često sam donijeti widget s čvor koji još nije umetnut, koja djeluje fino, tako dugo dok ne pokušati doprijeti u DOM .
Dakle, pitanje u priopćenju samo problem kada žele koristiti "dokument" identifikator ili će izazvati obradu općenito na propast? Pitam se je li _LOCATE_NODES funkcionalnost prvo treba provjeriti, pada natrag u DOM provjere kada je to potrebno?
Hvala na dvije velike (ako ne i dugo) članaka i galerije modula.
B
Komentar od Brian J. Miller - 12. rujna 2011 #
Brian
Ako koristite "dokument" identifikator _EVENTS i komponente nije priključen na dokument, to će biti zanemaren. Nadalje, "dokument" odnosit će se na dokument komponenta u, da li glavno ili jedno u iframe.
_locateNodes će raditi je li komponenta je priključen na dokumentu ili nije po tome jer pretražuje unutar boundingBox, inače to može pokupiti elemente s istim classnames u drugim slučajevima komponentu.
Komentar od Satyam - 13. rujna 2011 #
Hvala Satyam. Velika štedi vrijeme poboljšanja widget pisanja.
Ja sam proći kroz malo problema figuring out modul zavisnosti. I verzija iz kolovoza nisu čini se da su _EVENTS plamena. No, nakon što je shvatio i korištenje novije inačice galeriju, to utvrde velik.
Ja sam staviti zajedno jednostavniji primjer, samo za prikaz najosnovnijih widget pomoću MakeNode golim zahtjevima vještica bi mogle biti korisne:
https://github.com/JohnICello/yui-samples
Komentar od Ivan Iannicello - 16. rujna 2011 #
Jeste li razmišljali dijeleći se fantastičan predložak procesor u zasebnu galeriju modul?
Komentar od Ivan Lindal - 22. rujna 2011 #
John ,
To je smiješno da se postavlja pitanje, jer je cijeli projekt započeo sa samo predložak stvar. To je razlog zašto se zove MakeNode, nakon što je njezin jedini, a zatim javni način, makeNode pa je kao da pitate za povratak pozornici. Ali, to može smisla, omogućuje vidjeti brojeve:
Trenutna debug verzija je 23.7k, s minified verzija 4.68k, petina (sam stavio previše komentara za API dokumente). Do 3.4.1 izlazi, ova verzija je skrpan Y.substitute uključeni. Nakon što je out, minified ide dolje 3.87k, drugim riječima, krpa se 17%.
Ako traka sve ne odnose na templating, (i ja također znači ispuštanje _locateNodes) to ide dolje do 2.13k. To znači da predložak već uzima 55% modula. Pitam se, ako je vrijedan cijepanje.
Ja bi mislio sam da je templating dio je možda trećina paketa tako da bi smisla da ispadne ostatak. Ima li smisla da to učinite s tim brojevima?
Uključite _locateNodes, koja je tako zgodan jednom ste koristili _makeNode, a sve ostalo završava gore bitak ne toliko, nakon svih.
Komentar od Satyam - 22. rujna 2011 #
Ne čini se da u mogućnosti to držati ovaj modul mirno.
Dodao sam dvije nove značajke:
Ako koristite klase MakeNode niti bilo onih što nasljeđuje od mora renderUI način, ona će automatski stvoriti jedan za vas koji dodaje rezultat obrade _TEMPLATE za contentBox, a zatim se _locateNodes.
Također sam dodao {n} rezervirano mjesto koje će se niz obradu kodova i argumente i pretpostaviti vrijednost prvi je objekt koji će se koristiti za proces drugi.
Dakle,
{np objRef @ attr}će čitati iz imovineobjRef, pretpostaviti je vrijednost objekta i pročitajte atributattrod njega. To radi samo s obradu kodova koji se jednostavno identifikatore kao argumente (ne s {m}).Komentar od Satyam - 29. rujna 2011 #