Ako definovať funkciu observera vo widgete (Dojo)

V seriáli venovanom modulu Dojox form manager bol uvedený spôsob, ako programaticky definovať funkciu pre observer. Žiaľ uvedený postup nie je možné aplikovať pre všetky situácie a tak predstavujem ďalší zo spôsobov, ktoré umožňujú definovať funkciu pre observer programaticky tak, aby nebola súčasťou templatu.

Ide o spôsob, ktorý je už prijateľný, no aj tak vyžaduje zápis elementu <script> s atribútom type="dojo/method". Tentoraz ale funkcia observera nie je definovaná v hlavnej funkcii programu, ale priamo vo widgete, ktorý obsahuje form manager.

Príklad: Zápis do elementu <body>.

1
2
3
4
5
6
7
8
9
10
11
<div data-dojo-type="formManager"></div>
 
<script>
  require(["dojo/ready", "dojo/parser", "widget"], 
    function(ready, parser) {
      ready(function() {
 
    });
  });
 
</script>
<div data-dojo-type="formManager"></div>

<script>
  require(["dojo/ready", "dojo/parser", "widget"], 
    function(ready, parser) {
      ready(function() {

    });
  });

</script>

Príklad: Obsah súboru widget.js.

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
36
37
38
39
40
41
define([
    "dojo/_base/declare",
    "dijit/_Widget",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dojo/text!template.html",
    "dijit/registry",
    "dojo/_base/lang",
    "dojox/form/Manager",
    "dijit/form/TextBox"
],
        function(
                declare,
                _Widget,
                _WidgetBase,
                _TemplatedMixin,
                _WidgetsInTemplateMixin,
                template,
                registry,
                lang
                ) {
            return declare("formManager", [
                _Widget,
                _TemplatedMixin,
                _WidgetsInTemplateMixin
            ], {
                templateString: template,
                startup: function() {
                    this.inherited(arguments);
                    var FormManager = registry.byId("formManager");
 
                    lang.mixin(FormManager, {
                        observerFunction: function() {
                            console.log("Observer function");
                        }
 
                    });
                }
            });
        });
define([
    "dojo/_base/declare",
    "dijit/_Widget",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dojo/text!template.html",
    "dijit/registry",
    "dojo/_base/lang",
    "dojox/form/Manager",
    "dijit/form/TextBox"
],
        function(
                declare,
                _Widget,
                _WidgetBase,
                _TemplatedMixin,
                _WidgetsInTemplateMixin,
                template,
                registry,
                lang
                ) {
            return declare("formManager", [
                _Widget,
                _TemplatedMixin,
                _WidgetsInTemplateMixin
            ], {
                templateString: template,
                startup: function() {
                    this.inherited(arguments);
                    var FormManager = registry.byId("formManager");

                    lang.mixin(FormManager, {
                        observerFunction: function() {
                            console.log("Observer function");
                        }

                    });
                }
            });
        });

Príklad: Obsah súboru template.html.

1
2
3
4
5
6
7
8
9
10
<div>
    <div data-dojo-type="dojox/form/Manager" id="formManager">
        <input data-dojo-type="dijit/form/TextBox" 
               data-dojo-observer="observerFunction" 
               data-dojo-props="intermediateChanges : true" 
               name="field-text">
        <script type="dojo/method" 
         data-dojo-event="observerFunction"></script> 
    </div>
</div>
<div>
    <div data-dojo-type="dojox/form/Manager" id="formManager">
        <input data-dojo-type="dijit/form/TextBox" 
               data-dojo-observer="observerFunction" 
               data-dojo-props="intermediateChanges : true" 
               name="field-text">
        <script type="dojo/method" 
         data-dojo-event="observerFunction"></script> 
    </div>
</div>

Uvedený príklad nahrá widget uložený v súbore s názvom widget.js. Ten obsahuje Dojox form manager a observer, ktorý reaguje na zmenu hodnoty v poli formulára.

Záver

Pre fungovanie observera vo form manageri je potrebné definovať názov funkcie v template cez <script type="dojo/method" data-dojo-event="observerFunction"></script>, kde observerFunction je názov funkcie pre observer a vo widgete pridať funkciu s rovnakým názvom cez metódu mixin().

Ako definovať funkciu observera vo widgete (Dojo)

Záver

Komentáre

Pridať komentár