[DOJO 1.10] Créer événement à la volée

**JujuPomme** · 20/06/2018, 16h51

Hello,

J'utilise Dojo dans le cadre de l'application WebAppBuilder.

Je suis amené à générer une liste, sur laquelle j'aimerai pouvoir cliquer sur un élément quelconque et en récupérer le contenu afin d'instancier un formulaire. (AttributeInspector)

J'ai à peu près tout essayer, que ce soit des dojo-attach-point, des data-dojo-attach-event, des on(...)...

Mais rien n'y fait. Le fait que la liste soit générée après la création du document de manière générale, les attributs propre à Dojo ne sont pas reconnus.

De quelle manière je peux procéder afin de pouvoir avoir un événement unique sur chaque ligne?

Cordialement,

**JujuPomme** · 21/06/2018, 09h20

Hello,

Sujet résolu.

Si jamais ça peut aider (même si j'en doute vu la popularité du framework

) :
- J'ai généré un ID unique sur chaque ligne de ma liste
- Et ensuite créé les événements de cette manière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
_functionName: function(cpt) {
 
for (cpt; cpt>= 0; cpt--) {
          this.own(on(
            dom.byId('id_' + cpt),
            'click',
            lang.hitch(this, this._redirectFunction)
          ));
        }
}

Bonne journée !

**NoSmoking** · 22/06/2018, 09h57

Bonjour,
tu aurais pu également passer par la délégation d'événement sur ta liste.

Un petit exemple, qui n'est pas dans ton contexte mais c'est juste pour montrer.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Délégation événement sur liste</title>
<style>
html, body {
  margin: 0;
  padding: 0;
  font: 1em/1.5 Verdana,sans-serif;
}
main {
  display: block;
  margin: 0 auto;
  max-width: 60em;
}
h1, h2, h3 {
  color: #069;
}
button {
  font: inherit;
  padding: .25em 1em;
  cursor: pointer;
}
#info {
  border-left: 3px solid #080;
  text-indent: 1em;
}
ul {
  width: 15em;
  padding: 2px;
  border: 1px solid #CCC;
  list-style: none;
}
li {
  padding: .25em;
  border: 1px solid #FFF;
  border-radius: 3px;
  cursor: pointer;
}
li:hover {
  border: 1px solid #ABC;
  background: #DEF;
}
</style>
</head>
<body>
<main>
  <h1>Délégation événement sur liste</h1>
  <p id="info">Aucune sélection</p>
  <p><button id="btn">AddItem</button></p>
  <ul id="list">
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
  </ul>
</main>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<script>
require(["dojo/dom", "dojo/on", "dojo/dom-construct"], function (dom, on, domConstruct) {
  function addItem(id) {
    var oList = dom.byId(id);
    var num = oList.children.length;
    domConstruct.create("li", {
      innerHTML: "Item #" + (num + 1)
    }, oList);
  }
  on(dom.byId("list"), "click", function (e) {
    var oSrce = e.target;
    if (oSrce.tagName === "LI") {
      var oDest = dom.byId("info");
      oDest.textContent = "Sélection de " + oSrce.textContent;
    }
  });
  on(dom.byId("btn"), "click", function (e) {
    addItem("list");
  });
});
</script>
</body>
</html>

**JujuPomme** · 22/06/2018, 10h06

Hello,

Mmh, je te remercie pour la méthode !
Il est clair qu'elle est bien plus technique que la mienne, j'ai bien trop peu de connaissances sur le framework pour en connaître toutes les capacités...

Cette méthode est plus opti j'imagine?

**NoSmoking** · 22/06/2018, 10h15

Elle n'est pas plus optimisé mais lors de la création/ajout d'un nouvel élément tu n'as pas à te soucier de gérer/ajouter les événements, accessoirement elle prend moins de place en mémoire attendu que tu ne définies qu'une fonction pour l'ensemble de tes éléments et non une par élément, imagine que tu en ais 1000... voire plus (dans ce cas tu perdras peut être un peu en performance, temps de réaction).

**JujuPomme** · 22/06/2018, 10h18

J'ai procédé de manière plus "académique" on va dire, car je n'aurai jamais plus d'une dizaine de ligne maximum.

Cela dit, je note ton petit bout de code dans un coin si je viens à travailler avec des données plus conséquentes !

**NoSmoking** · 22/06/2018, 13h51

... car je n'aurai jamais plus d'une dizaine de ligne maximum.

cela fait quand même une_dizaine_de_ligne_maximum -1 déclarations en trop

[DOJO 1.10] Créer événement à la volée [Dojo]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager