×
Vytvárame riešenia

Spoznávame Dojox form manager - časť 5

V tejto časti venovanej widgetu Dojox form manager, budú predstavené spôsoby ako identifikovať element, ktorý spustil observer. Celkovo budú predstavené štyri spôsoby, ktorými je možné dosiahnuť rovnaký výsledok. Za asi najjednoduchší spôsob je možné považovať posledný predstavený spôsob.
Pre jednoduchú demonštráciu bude použitý Dojox form manager s tromi dijitmi Textbox. Zápisy Dojox form managera sa budú trochu odlišovať, keďže každý spôsob identifikácie widgetu vyžaduje určitú kombináciu HTML atribútov. Výsledkom každého programového kódu bude vloženie textu Done do poľa formulára, na ktorom bol aktivovaný observer.

Prvý spôsob identifikácie elementov

Prvý spôsob identifikácie patrí k tým jednoduchším. Vyžaduje, aby elementy formulára obsahovali atribúty id a name. Pre identifikáciu elementov bude použitá kombinácia objektu formWidgets a metódy byId(). Zároveň bude využitý parameter observera name, ktorý je kľúčový pre správnu identifikáciu elementu.
Príklad: Identifikácia elementov po spustení observera.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div data-dojo-type="dojox/form/Manager"
data-dojo-props="observerFunction : function() {}"
id="formManager">
<input id="field1" data-dojo-type="dijit/form/TextBox"
data-dojo-observer="observerFunction"
data-dojo-props="intermediateChanges : true" name="textbox-field1">
<input id="field2" data-dojo-type="dijit/form/TextBox"
data-dojo-observer="observerFunction"
data-dojo-props="intermediateChanges : true" name="textbox-field2">
<input id="field3" data-dojo-type="dijit/form/TextBox"
data-dojo-observer="observerFunction"
data-dojo-props="intermediateChanges : true" name="textbox-field3">
</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) {
var id = this.formWidgets[name].widget.id;
var node = registry.byId(id);
node.set("value", "Done");
}
});
});
});
</script>

Druhý spôsob identifikácie elementov

Druhý spôsob identifikácie elementov vychádza z prvého, pričom je založený na neexistencii HTML atribútov id. Jeho jadro tvorí získanie hodnoty atribútu id wrappera (widgetu), ktorá je rovnaká ako hodnota atribútu id cieľového elementu. Rozdiel je len v prefixe widget_, ktorý programový kód odstraňuje a v čísle zabezpečujúcom unikátny identifikátor.
Príklad: Hodnota atribútu id prvého widgetu.
1
widget_dijit_form_TextBox_1
Príklad: Hodnota atribútu id elementu v prvom widgete.
1
dijit_form_TextBox_1
Odstránenie prefixu widget_ sa v programe vykonáva prostredníctvom funkcie replace(). Pre prístup k atribútu id widgetu je použitý objekt domNode.
Príklad: Identifikácia elementov po spustení observera.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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-field1">
<input data-dojo-type="dijit/form/TextBox"
data-dojo-observer="observerFunction"
data-dojo-props="intermediateChanges : true" name="textbox-field2">
<input data-dojo-type="dijit/form/TextBox"
data-dojo-observer="observerFunction"
data-dojo-props="intermediateChanges : true" name="textbox-field3">
</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) {
var id = this.formWidgets[name].widget.domNode.id.
replace(/widget_/g, "");
var node = registry.byId(id);
node.set("value", "Done");
}
});
});
});
</script>

Tretí spôsob identifikácie elementov

Tretí spôsob identifikácie elementov je založený na atribútoch name, id, data-dojo-attach-point a mape hodnôt HTML atribútov name a data-dojo-attach-point. Mapa hodnôt, ktorá je umiestnená do premennej fields obsahuje dvojicu key:value v podobe name:data-dojo-attach-point. Prostredníctvom hodnoty atribútu data-dojo-attach-point je možné identifikovať aktívny element. Potom už len stačí získať hodnotu atribútu id aby bolo možné pracovať s metódou byId().
Príklad: Identifikácia elementov po spustení observera.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div data-dojo-type="dojox/form/Manager"
data-dojo-props="observerFunction : function() {}" id="formManager">
<input id="field1" data-dojo-type="dijit/form/TextBox"
data-dojo-attach-point="field1" data-dojo-observer="observerFunction"
data-dojo-props="intermediateChanges : true" name="textbox-field1">
<input id="field2" data-dojo-type="dijit/form/TextBox"
data-dojo-attach-point="field2" data-dojo-observer="observerFunction"
data-dojo-props="intermediateChanges : true" name="textbox-field2">
<input id="field3" data-dojo-type="dijit/form/TextBox"
data-dojo-attach-point="field3" data-dojo-observer="observerFunction"
data-dojo-props="intermediateChanges : true" name="textbox-field3">
</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) {
var fields = {
"textbox-field1" : "field1",
"textbox-field2" : "field2",
"textbox-field3" : "field3"
};
var id = this[fields[name]].id;
var node = registry.byId(id);
node.set("value", "Done");
}
});
});
});
</script>

Štvrtý spôsob identifikácie elementov

Posledný, najjednoduchší spôsob identifikovania poľa formulára, je prostredníctvom tretieho parametra metódy observera. Tretí parameter obsahuje dijit (objekt), prostredníctvom ktorého je možné manipulovať s daným poľom formulára. Funkcia observera má celkovo štyri parametre. Prvý a posledný sú rovnaké. Obsahujú aktuálnu hodnotu.
Príklad: Rýchly prístup k polu formulára, ktoré spustilo observer.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div data-dojo-type="dojox/form/Manager"
data-dojo-props="observerFunction : function() {}"
id="formManager">
<input id="field1" data-dojo-type="dijit/form/TextBox"
data-dojo-observer="observerFunction"
data-dojo-props="intermediateChanges : true"
name="textbox-field1">
<input id="field2" data-dojo-type="dijit/form/TextBox"
data-dojo-observer="observerFunction"
data-dojo-props="intermediateChanges : true"
name="textbox-field2">
<input data-dojo-type="dijit/form/TextBox"
data-dojo-observer="observerFunction"
data-dojo-props="intermediateChanges : true"
name="textbox-field3">
</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, node) {
var node = registry.byId(node.id);
node.set("value", "Done");
}
});
});
});
</script>
Keďže node je dijit, ktorý spustil observer, je možné naň aplikovať metódu set() ako vidieť na nasledujúcom príklade.
Príklad: Zjednodušenie príkladu.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div data-dojo-type="dojox/form/Manager"
data-dojo-props="observerFunction : function() {}"
id="formManager">
<input id="field1" data-dojo-type="dijit/form/TextBox"
data-dojo-observer="observerFunction"
data-dojo-props="intermediateChanges : true"
name="textbox-field1">
<input id="field2" data-dojo-type="dijit/form/TextBox"
data-dojo-observer="observerFunction"
data-dojo-props="intermediateChanges : true"
name="textbox-field2">
<input data-dojo-type="dijit/form/TextBox"
data-dojo-observer="observerFunction"
data-dojo-props="intermediateChanges : true"
name="textbox-field3">
</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, node) {
node.set("value", "Done");
}
});
});
});
</script>

Záver

V prípade, že poznáte iné riešenia ako identifikovať elementy pri použití observera, podeľte sa o ne prostredníctvom komentára. V ďalšej časti venovanej widgetu Dojox form manager sa opäť vrátim k atribútom data-dojo-attach-point a data-dojo-attach-event.
Dojo,programovanie,JavaScript,dojo,dojox/form/Manager,dijit/registry,dojo/_base/lang,input,span,data-dojo-props,mixin,byId,observer,element,data-dojo-attach-point
Ž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