×
Vytvárame riešenia

Ako aplikovať observer ak je použitá metóda setFormValues (Dojo)

Jednou z negatívnych vlastností Dojox form managera je skutočnosť, že ak sa použije metóda setFormValues(), zmena hodnôt v poliach formulára zároveň spustí aj observer. Zo začiatku jednoduchý problém, ktorý je možné ošetriť podmienkou, no v skutočnosti ide o zložitejší jav, ako sa na prvý pohľad môže zdať.
Metóda setFormValues() spúšťa observer, ktorý spúšťa v prehliadači asynchrónne eventy. Akákoľvek premenná, ktorá by riadila funkciu observera, bude platná skôr, ako skončia eventy v internetovom prehliadači.
Jednou z alternatív, ktorú je možné aplikovať na funkciu observera, je ignorovať počet volaní observera, ktorý sa rovná počtu jeho volaní - počtu polí so zápisom data-dojo-observer="observerFunction" vo form manageri. To ale znamená, že pri každej zmene počtu elementov formulára so zápisom data-dojo-observer="observerFunction" je potrebné meniť aj číslo s počtom volaní.
Druhou alternatívou je aktivovať riadiacu premennú s časovým oneskorením, ktoré je dlhšie ako čas eventov, napr. 300 ms. A práve druhej alternatíve je venovaný tento príspevok. Na nasledujúcom príklade je demonštrovaný predstavený problém.
Príklad: Metóda setFormValues() spustí 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
<div data-dojo-type="dojox/form/Manager" id="formManager"
data-dojo-props="observerFunction : function() {}">
<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);
}
})
FormManager.setFormValues({"textbox-field": "value"});
});
});
</script>
V ďalšom príklade je uvedený klasický synchrónny spôsob možného riešenia problému, ktorý je ale neúčinný, keďže eventy sú asynchrónne.
Príklad: Bežné aplikovanie podmienky, ktoré je neúčinné.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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) {
if (this.formValuesUpdated) {
console.log("Clicked " + value + " " + name);
}
}
})
FormManager.setFormValues({"textbox-field": "value"});
FormManager.formValuesUpdated = true;
});
});
</script>
Pre zamedzenie problému s observerom si vytvoríme funkciu, ktorá signalizuje, že hodnoty formulára už boli nastavené a observer je pripravený na svoju činnosť. Funkcia s názvom enableObserver() sa spúšťa cez časovač setTimeout() s nastavením na 300ms. Tento čas by mal byť dostatočný na ukončenie asynchrónnych udalostí, ktoré spustí metóda setFormValues(), resp. observer. Vlastnosťou formValuesUpdated povolujeme observeru jeho činnosť. Pokiaľ vlastnosť neexistuje alebo bude mať hodnotu false, obsah funkcie observera bude neaktívny.
Príklad: Zamedzenie spustenia observera pri metóde setFormValues().
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
<div data-dojo-type="dojox/form/Manager" id="formManager"
data-dojo-props="observerFunction : function() {}">
<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");
function enableObserver() {
FormManager.formValuesUpdated = true;
}
setTimeout(enableObserver, 300);
lang.mixin(FormManager, {
observerFunction: function(value, name) {
if (this.formValuesUpdated) {
console.log("Clicked " + value + " " + name);
}
}
});
FormManager.setFormValues({"textbox-field": "value"});
});
});
</script>
Teraz by už funkcia observera mala reagovať len na zmenu v poli formulára. Pre zamedzenie problémov so scopom, je potrebné aplikovať na funkciu setTimeout() metódu hitch().
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
<script>
require(["dojo/ready", "dojo/_base/lang", "dijit/registry",
"dojo/parser"],
function(ready, lang, registry) {
ready(function() {
var FormManager = registry.byId("formManager");
function enableObserver() {
this.formValuesUpdated = true;
}
setTimeout(lang.hitch(FormManager, enableObserver), 300);
lang.mixin(FormManager, {
observerFunction: function(value, name) {
if (this.formValuesUpdated) {
console.log("Clicked " + value + " " + name);
}
}
});
FormManager.setFormValues({"textbox-field": "value"});
});
});
</script>

Záver

V prípade, že máte ďalšie zaujímavé riešenie ako uvedený problém odstrániť, podeľte sa oň prostredníctvom komentára.
Dojo,programovanie,JavaScript,dojo,dojox/form/Manager,observer,intermediateChanges,setFormValues,dijit/registry,dojo/_base/lang
Ž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

Pong 06.11.2014 04:14 hello, I'm sorry that I can't read your language. Are you talking this bugs in dojox??? https://bugs.dojotoolkit.org/ticket/18356
Autor 16.11.2014 18:06 Thanks for comment This problem should fix watch property. But it overrides watch() method and doesn't work. http://dojotoolkit.org/reference-guide/1.10/dojox/form/manager/_Mixin.html#id5

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších