×
Creating solutions

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
No part of this article may be reproduced without mention of the author and URL to this website.
For more information, see the About section.

Comments

Article has no comments.

Add a comment

Name (required)
Website
Message (required)
Submit
From latest