Cet article a pour but de montrer les différences entre dojo.byId(), dijit.byId() et jsId

Traduction de : http://dojocampus.org/content/2008/05/06/jsid-dijitbyid-and-dojobyid/

Une question récurrente des nouveaux utilisateurs de dojo est : Quelle est la différence entre jsId, dijit.byId() and dojo.byId() ?

Voici le widget ContentPane ci dessous qui a une propriété id (attribut standard html pour n’importe quel tag) et un attribut jsId (attribut spécifique à dojo, expliqué ci-dessous) :

1
2
3
4
5

<div id="myDivId"
     dojoType="dijit.layout.ContentPane"
     jsId="myJSId">
   Hello Everyone!
</div>

dojo.byId()

dojo.byId() est similaire à : document.getElementById() pour accéder à un nœud DOM. Il suffit de donner la valeur de l’attribut id en paramètre.

Par exemple :

1

dojo.byId("myDivId").style.height = '300px';

dijit.byId()

dijit.byId() est un peu différent. L’attribut id est utilisé comme paramètre, mais ce qu’il retourne dans ce cas est un objet qui a été créé par le widget system de dojo quand il a été initialisé en un dijit.
Cela permet de modifier des attributs spécifiques à dojo pour ce widget ou appeler des méthodes définies dans sa classe (dans ce cas, on peut appeler des méthodes de la classe ContentPane).
Par exemple, nous pouvons modifier le contenu du ContentPane via la méthode setContent().

1

dijit.byId("myDivId").setContent("Hello World!");

Vous pouvez également changer le style comme vous l’avez fait avec dijit.byId() ci-dessus en utilisant la propriété domNode du ContentPane (actuellement domNode est définit plus haut dans l’arbre de l’héritage donc tous les dijit possèdent la propriété domNode).

Cet exemple permet de sauvegarder les résultats du dijit.byId() dans une variable locale.

1
2
3

myContentPane = dijit.byId("myDivId");
myContentPane.domNode.style.height = '300px';
myContentPane.setContent("Hello World!");

jsId

jsId sauvegarde pour vous vos widgets automatiquement en créant des variables javascript (effectué par le parser dojo lui-même). Cette variable contient le même objet que celui retourné par dijit.byId(). Quelque soit la valeur donnée à l’attribut jsId, elle devient le nom de la variable globale, donc attention aux mots réservés et aux widgets qui auraient le même jsId.

A partir du moment où l’attribut jsId de mon ContentPane possède la valeur myJSId, je peux simplifier le code ci-dessus en supprimant le dijit.byId() et en utilisant l’attribut jsId comme nom de variable :

1
2

myJSId.domNode.style.height = '300px';
myJSId.setContent("Hello World!");

jsId n’est pas un attribut obligatoire, mais il peut être utile dans certain cas.