2010-02-04 3 views
4

Je suis tout à fait nouveau ... et au Dojo je dessine de mon expérience avec jQuery un peu ...Dojo ciblage élément/widget, que fais-je tort?

J'ai plusieurs éléments comme ceci:

<input name="info1" value="" style="width:52px" contstraints="{pattern:'#'}" dojoType="dijit.form.NumberTextBox"/> 

<input name="info2" value="" style="width:52px" contstraints="{pattern:'#'}" dojoType="dijit.form.NumberTextBox"/> 

<input name="info3" value="" style="width:52px" contstraints="{pattern:'#'}" dojoType="dijit.form.NumberTextBox"/> 

Mais je vais avoir le plus de temps Tring assigner simple événement onKeyUp ... tout essayé ive ressemble comme ça fonctionnerait, mais qui ne fonctionne pas ... la console signale toujours que la chose im essayant de faire est pas une fonction ...

dojo.addOnLoad(function() 
{ 
    dojo.query('input[name^=info]').connect('onkeyup',function(e) 
    { 
     console.log('oh yeah'); 
    }); 
}); 

Qu'est-ce que Est-ce que je fais mal, que dois-je faire attention ???

Répondre

2

Malheureusement, dojo.query() ne retournera que des nœuds DOM natifs. Je pense que vous voulez récupérer le widget Dijit rendu.

Pour ce faire, vous devez affecter vos identifiants d'entrée et utiliser dijit.byId(). En outre, contrairement aux noms d'événements HTML natifs, les noms d'événement Dojo sont sensibles à la casse. Par conséquent, onkeyup fait référence au code HTML natif et est différent du nom d'événement Dojo onKeyUp. Je pense que vous pouvez également avoir un «t» supplémentaire dans contstraints.

Un exemple d'utilisation:

<html> 
<head> 
<title>Test</title> 
<link type="text/css" rel="stylesheet" href="dijit/themes/tundra/tundra.css"/> 
</head> 
<body class="tundra"> 

<input id="input1" name="input" type="text"dojoType="dijit.form.NumberTextBox"/> 

<script type="text/javascript" src="dojo/dojo.js" 
     djConfig="isDebug: true, parseOnLoad: true"></script> 

<script type="text/javascript"> 
dojo.require("dijit.form.NumberTextBox"); 
dojo.addOnLoad(
    function() { 
     dojo.connect(dijit.byId("input1"), 'onKeyUp', 
       function(e) { console.log('oh yeah'); }); 
    } 
); 
</script> 

</body> 
</html> 
+0

Si vous voulez un Dijit, il n'est pas nécessaire d'assigner des ID à tout. Passez simplement le résultat de dojo.query à dijit.byNode pour obtenir la référence du widget. – peller

+1

après le widget est initialisé le dom est changé, en passant dans le nœud d'origine elem à dijit.byNode ne retourne pas le widget – farinspace

+0

oh oui, les éléments de formulaire sont spéciaux. En fait, ils laissent le contrôle d'entrée par nom en place de sorte qu'un formulaire normal fonctionne et qu'ils créent une structure distincte pour gérer la présentation de l'interface utilisateur. Vous avez raison: vous devez créer votre requête de manière différente, comme utiliser dojoType ou id ... il est simplement plus facile de lier directement le widget lorsque vous le créez. – peller

0

Dojo, il est facile de déclarer les événements sans la douleur de passer par les requêtes. Placez simplement l'événement dans votre balisage. Voir http://docs.dojocampus.org/quickstart/events#events-with-dijit

<input name="info1" value="" style="width:52px" constraints="{places:0}" dojoType="dijit.form.NumberTextBox" onkeyup="console.log('key up')" /> 

Il est plus concis, et vous n'avez pas besoin de nommer et de chercher des références juste pour lier l'événement. De toute façon, abboq a raison, vous voudrez généralement traiter le widget directement plutôt que le nœud DOM, car l'instanciation d'un Dijit finit souvent par restructurer le DOM afin qu'il soit très différent de la page d'origine. Le widget agit comme une abstraction.

+0

ya le dom est changé par dojo, l'autre problème que j'ai est de savoir comment obtenir une collection de ces éléments après que le dom a été restructuré (après que le widget a été initialisé) ... – farinspace