Spoznávame Dojox form manager - časť 4

Permalink: http://how-to.mldgroup.com/index.php?article=spoznavame-dojox-form-manager-cast-4

12.6.2013, Matej LednárKategória: Dojo

V tejto časti venovanej widgetu Dojox form manager nepriamo nadviažem na druhý diel, ktorý demonštroval prácu s observerom. Hlavnou témou dnešného príspevku bude použitie atribútu data-dojo-attach-event, keďže ide o rovnaký postup ako pri práci s observerom.

Kým observer slúži pre prácu s udalosťami na elementoch formulára, pre obsluhu udalostí na neformulárových elementoch je možné použiť atribút data-dojo-attach-event. Hodnotou atribútu data-dojo-attach-event je dvojica key : value v podobe názvu udalosti a funkcie. Rovnako ako pri observeri aj pri definovaní funkcie pre udalosť je potrebné definovať prázdnu funkciu v HTML atribúte data-dojo-props. Ten musí byť umiestnený v elemente so zápisom data-dojo-type="dojox/form/Manager".

Práca s atribútom data-dojo-attach-event je rovnaká ako práca s observerom. To znamená, že funkciu, ktorá bude priradená udalosti, je potrebné najskôr uviesť v elemente definujúcom Dojox form manager. Následne je potrebné prepísať prázdnu funkciu pre udalosť, ktorá ale už bude obsahovať programový kód. To sa vykoná cez metódu mixin(). Widget je možné získať prostredníctvom metódy byId().

Nasledujúci príklad vytvorí Dojox form manager s elementmi <input> a <span>. Pre element <span> bude vytvorená funkcia reagujúca na udalosť click. Po kliknutí na text Click me sa v konzole zobrazí typ udalosti a textový obsah elementu <span>.

Príklad: Použitie atribútu data-dojo-attach-event vo widgete Dojox form manager.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div data-dojo-type="dojox/form/Manager" 
     data-dojo-props="display : function() {}" id="formManager">
  <input data-dojo-type="dijit/form/TextBox" name="textbox-field">
  <span class="button" data-dojo-attach-event="onClick : display">
     Click me
  </span>
</div>
 
<script>
  require(
          ["dojo/ready", "dojo/_base/lang", "dijit/registry", 
           "dojo/parser"],
          function(ready, lang, registry, parser) {
            ready(function() {
              var node = registry.byId("formManager");
              lang.mixin(node, {
                display : function(evt) {
                  console.log("Event: " + evt.type + " Node value: " +
                  evt.target.innerText);
                }
              })
            });
          });
</script>
<div data-dojo-type="dojox/form/Manager" 
     data-dojo-props="display : function() {}" id="formManager">
  <input data-dojo-type="dijit/form/TextBox" name="textbox-field">
  <span class="button" data-dojo-attach-event="onClick : display">
     Click me
  </span>
</div>

<script>
  require(
          ["dojo/ready", "dojo/_base/lang", "dijit/registry", 
           "dojo/parser"],
          function(ready, lang, registry, parser) {
            ready(function() {
              var node = registry.byId("formManager");
              lang.mixin(node, {
                display : function(evt) {
                  console.log("Event: " + evt.type + " Node value: " +
                  evt.target.innerText);
                }
              })
            });
          });
</script>

Prostredníctvom parametra evt je možné získať typ udalosti ako aj obsah elementu, nad ktorým bola udalosť click vyvolaná.

Záver

Nasledujúcej časti bude predstavený spôsob ako identifikovať element, ktorý spustil observer.

Spoznávame Dojox form manager - časť 4

Záver

Komentáre

Pridať komentár