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>
<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>
<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.

Spoznávame Dojox form manager - časť 2

Záver

Komentáre

Pridať komentár