Ako nájsť widget (Dojo)

Pri práci s Dojo Toolkit je viacero spôsobov ako vyhľadať widget. Jeden spôsob je cez DOMNode, druhý cez atribút id. Widgety je možné hľadať priamo alebo nepriamo.

Pre demonštráciu ako vyhľadávať widgety použijem deklaratívny zápis viacerých widgetov (TitlePane, Form, TextBox, Button) do sekcie HTML a základ pre testovanie do sekcie pre JavaScript.

Príklad: Testovacia vzorka s viacerými widgetmi - zápis do sekcie HTML.

1
2
3
4
5
6
7
8
9
<div id="pane" data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'Pane #1'">
  <div id="form" data-dojo-type="dijit/form/Form">
   <div id="div">
     <p id="p">
       <input data-dojo-type="dijit/form/TextBox">
       <button data-dojo-type="dijit/form/Button">OK</div>
    </p>
  </div>
</div>
<div id="pane" data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'Pane #1'">
  <div id="form" data-dojo-type="dijit/form/Form">
   <div id="div">
     <p id="p">
       <input data-dojo-type="dijit/form/TextBox">
       <button data-dojo-type="dijit/form/Button">OK</div>
    </p>
  </div>
</div>

Príklad: Zápis do sekcie JavaScript.

1
2
3
4
5
6
7
8
9
10
11
12
13
require(["dojo/ready", "dijit/registry", "dojo/dom"],
  function (ready, registry, dom) {
    ready(function () {
 
      var pane = dom.byId("pane");
      var form = dom.byId("form");
      var div = dom.byId("div");
      var p = dom.byId("p");
      console.log(registry.findWidgets(pane));
      console.log(registry.findWidgets(form));
      //  ... JS code
  });
});
require(["dojo/ready", "dijit/registry", "dojo/dom"],
  function (ready, registry, dom) {
    ready(function () {

      var pane = dom.byId("pane");
      var form = dom.byId("form");
      var div = dom.byId("div");
      var p = dom.byId("p");
      console.log(registry.findWidgets(pane));
      console.log(registry.findWidgets(form));
      //  ... JS code
  });
});

Základom pre vyhľadávanie widgetov je modul dijit/registry, ktorý obsahuje všetky potrebné metódy.

Metóda byId()

Metóda sa používa na už vytvorený widget, ktorý je v DOM. Na základe hodnoty atribútu id sa vráti widget ako objekt. DOMNode, ktorý je widgetom obsahuje HTML atribút widgetid. Ak atribút id neexistuje alebo DOMNode s atribútom id nie je widgetom, metóda vráti hodnotu undefined.

Príklad: Zápis metódy byId().

1
var widget = registry.byId(id);
var widget = registry.byId(id);

Metóda byNode()

Metóda sa používa na už vytvorený widget, ktorý je v DOM. Na základe DOMNode sa vráti widget ako objekt. DOMNode, ktorý je widgetom, obsahuje HTML atribút widgetid. Ak DOMNode neexistuje alebo DOMNode nie je widgetom, metóda vráti hodnotu undefined.

Príklad: Zápis metódy byNode().

1
var widget = registry.byNode(DOMNode);
var widget = registry.byNode(DOMNode);

Metóda getEnclosingWidget()

Metóda vráti najbližší widget k zadanému DOMNode vrátane. To znamená, že ak je DOMNode zároveň widget, nevyhľadáva smerom nahor, ale vráti widget reprezentujúci daný DOMNode. Vyhľadávanie funguje smerom nahor, teda k parentom. Ak widget v smere nahor neexistuje, vráti hodnotu null.

Príklad: Zápis metódy getEnclosingWidget().

1
var widget = registry.getEnclosingWidget(DOMNode);
var widget = registry.getEnclosingWidget(DOMNode);

Metóda findWidgets()

Metóda hľadá opačným smerom ako metóda getEnclosingWidget(). Tentoraz vráti len najbližších potomkov. Ak je DOMNode zároveň aj widget, nevráti ho. Hľadá smerom nadol - do vnútra stromu a len prvý výskyt. Prehľadáva celú úroveň prvého výskytu widgetu, takže vráti všetky widgety na rovnakej úrovni. Metóda neprehľadáva obsah nájdených potomkov, takže nevráti všetky widgety, ktoré sú v definovanom DOMNode. Výsledkom vyhľadávania je pole. Ak v DOMNode nie je žiaden widget, vráti prázdne pole.

Príklad: Zápis metódy findWidgets().

1
var widgets = registry.findWidgets(DOMNode);
var widgets = registry.findWidgets(DOMNode);

Záver

Ak poznáte ďalšie zaujímavé tipy, ako vyhľadávať widgety, podeľte sa o ne prostredníctvom komentára.