×
Vytvárame riešenia

Spoznávame Dojox form manager - časť 2

V prvej časti venovanej widgetu Dojox form manager bol predstavený deklaratívny zápis widgetu a observera. V tejto časti bude zápis observera upravený výsledkom čoho bude lepšie ladenie programového kódu a zároveň odstránenie skriptu z templatu.
Pre odstránenie skriptu z templatu je potrebné použiť moduly lang a registry. Prostredníctvom metódy byId() z modulu registry sa identifikuje widget s Dojox form managerom. Prostredníctvom metódy mixin() z modulu lang sa definuje funkcia pre observer. V skutočnosti pôjde o prepísanie pôvodnej prázdnej funkcie. Správanie widgetu bude identické ako z príkladu, ktorý bol uvedený v prvej časti.
Skôr ako uvediem programový kód je potrebné ešte upozorniť na problém s rozsahom platnosti premenných (scope). Pre tento účel je potrebné pre observer definovať prostredníctvom HTML atribútu data-dojo-props prázdnu metódu. Bez definovania metódy v atribúte data-dojo-props by vznikla chyba pri parsovaní, kedže parser v čase spracovania widgetu by nenašiel metódu pre observer. Názov metódy musí byť rovnaký ako hodnota v atribúte data-dojo-observer.
Príklad: Vytvorenie prázdnej metódy s názvom observerFunction pre observer.
1
2
3
4
5
6
<div data-dojo-type="dojox/form/Manager"
data-dojo-props="observerFunction : function() {}" id="formManager">
<!-- form elements here -->
</div>
Názov metódy pre observer následne upravíme prostredníctvom metódy mixin(). Preto stačí zadať iba prázdnu funkciu. Ak je použitých viacero metód pre observer, v atribúte data-dojo-props sa od seba oddeľujú čiarkou. Teraz nasleduje kompletný príklad pre prácu s Dojox form managerom a observerom.
Príklad: Kompletný príklad, ktorý sa umiestni do elementu <body>.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div data-dojo-type="dojox/form/Manager"
data-dojo-props="observerFunction : function() {}" id="formManager">
<input data-dojo-type="dijit/form/TextBox"
data-dojo-observer="observerFunction"
data-dojo-props="intermediateChanges : true" name="textbox-field">
</div>
<script>
require(["dojo/ready", "dojo/_base/lang",
"dijit/registry", "dojo/parser"
], function(ready, lang, registry) {
ready(function() {
var FormManager = registry.byId("formManager");
lang.mixin(FormManager, {
observerFunction : function(value, name) {
console.log("Clicked " + value + " " + name );
}
})
});
});
</script>
Uvedený príklad demonštruje ako zapísať observer programaticky, respektíve ako odstrániť skript z templatu a vytvoriť funkčný observer.

Záver

V ďalšej časti sa zameriam na prácu s atribútom data-dojo-attach-point.


Dojo,programovanie,JavaScript,dojo,dojox/form/Manager,observer,intermediateChanges,gatherFormValues,setFormValues,dijit/registry,dojo/_base/lang
Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.
Viac informácií nájdete v sekcii O projekte.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších