Spoznávame Dojox form manager - časť 3

V tejto časti venovanej widgetu Dojox form manager sa zameriam na HTML atribút data-dojo-attach-point a metódy gatherFormValues() a setFormValues(). Našou úlohou bude kombinovať elementy formulára s ostatnými elementmi tak, aby boli pri spracovaní súčasťou formulára, widgetu Dojox form manager.

Pre zjednodušenie príkladu bude použitý jeden formulárový element <input> a jeden neformulárový element <span>. Ako prvé si vytvoríme jednoduchý formulár.

Príklad: Jednoduchý formulár.

1
2
3
4
5
6
7
<div data-dojo-type="dojox/form/Manager" id="formManager">
  <input data-dojo-type="dijit/form/TextBox" name="textbox-field" 
   value="Input element value">
  <span class="dojoFormValue" data-dojo-attach-point="span-element">
    Span element value
  </span>
</div>
<div data-dojo-type="dojox/form/Manager" id="formManager">
  <input data-dojo-type="dijit/form/TextBox" name="textbox-field" 
   value="Input element value">
  <span class="dojoFormValue" data-dojo-attach-point="span-element">
    Span element value
  </span>
</div>

Príkla demonštruje formulár widgetu Dojox form manager. Ak chceme pracovať s metódami gatherFormValues() a setFormValues() na neformulárových elementoch ako je napríklad element <span>, musia sa použiť nasledujúce zápisy:

class="dojoFormValue"
data-dojo-attach-point="id"

Kým hodnota atribútu class je fixná (dojoFormValue je kľúčové slovo pre podporu metód gatherFormValues() a setFormValues()), hodnotu atribútu data-dojo-attach-point si programátor volí sám. Ide o alternatívny zápis atribútu name. Metóda gatherFormValues(), ktorá sa zadáva bez argumentov, vráti páry typu name : value. Pri elementoch formulára sú to hodnoty atribútov name a value a pri neformulárových elementoch sú to hodnoty atribútu data-dojo-attach-point a vlastnosti innerHTML.

Metóda setFormValues() obsahuje argument typu objekt, ktorý sa skladá z párov name : value. Tie sú automaticky predané elementom widgetu Dojox form manager.

Nasledujúci príklad demonštruje výpis aktuálnych hodnôt widgetu Dojox form manager a následnú zmenu hodnôt. Výpis pôvodných hodnôt je zobrazený v konzole a zmenené hodnoty sú zobrazené v prehliadači vo widgete.

Príklad: Použitie meód gatherFormValues() a setFormValues().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div data-dojo-type="dojox/form/Manager" id="formManager">
  <input data-dojo-type="dijit/form/TextBox" name="textbox-field" 
   value="Input element value">
  <span class="dojoFormValue" data-dojo-attach-point="span-element">
    Span element value
  </span>
</div>
 
<script>
  require(["dojo/ready", "dojo/_base/lang", "dijit/registry", 
           "dojo/parser"],
          function(ready, lang, registry) {
            ready(function() {
              var node = registry.byId("formManager");
              console.log(node.gatherFormValues());
              node.setFormValues({"textbox-field" : "New input value", 
                                  "span-element" : "New span value"});
            });
          });
</script>
<div data-dojo-type="dojox/form/Manager" id="formManager">
  <input data-dojo-type="dijit/form/TextBox" name="textbox-field" 
   value="Input element value">
  <span class="dojoFormValue" data-dojo-attach-point="span-element">
    Span element value
  </span>
</div>

<script>
  require(["dojo/ready", "dojo/_base/lang", "dijit/registry", 
           "dojo/parser"],
          function(ready, lang, registry) {
            ready(function() {
              var node = registry.byId("formManager");
              console.log(node.gatherFormValues());
              node.setFormValues({"textbox-field" : "New input value", 
                                  "span-element" : "New span value"});
            });
          });
</script>

Týmto krátkym a jednoduchým príkladom bola demonštrovaná práca s atribútom data-dojo-attach-point a metódami gatherFormValues() a setFormValues() vo widgete Dojox form manager.

Záver

V ďalšom článku venovanom widgetu Dojox form manager sa budem venovať atribútu data-dojo-attach-event.

Spoznávame Dojox form manager - časť 3

Záver

Comments

Add a comment