Discussion :

[sylflo]

Bonjour,

Je suis en train d'apprendre Polymer.
J'essaie de créer un guest book avec une notation par étoile.

Je bloque justement sur la partie notation.
Pour l'instant lorsqu'un hover est effectué sur une étoile je rajoute un attribut à la cinquième étoile. Et cette attribut à l'aide de css se remplit de couleur.
Mais se tout se fait par "pur" javascript.

Voici le code

Code :

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
<dom-module id="stars-hover">
 
 
  <template>
 
    <style>
 
      iron-icon {
        fill: rgba(0, 0, 0, 0);
        stroke: currentcolor;
      }
 
      iron-icon[pressed] {
        fill: currentcolor;
      }
 
    </style>
 
 
    <h1>Stars hover</h1>
 
    <div on-mouseleave="unfill">
 
      <iron-icon on-mouseenter='toggle' id="stars-hover-one" icon="[[toggleIcon]]"></iron-icon>
      <iron-icon on-mouseenter="toggle" id="stars-hover-two" icon="[[toggleIcon]]"></iron-icon>
      <iron-icon on-mouseenter="toggle" id="stars-hover-three" icon="[[toggleIcon]]"></iron-icon>
      <iron-icon on-mouseenter="toggle" id="stars-hover-four" icon="[[toggleIcon]]"></iron-icon>
      <iron-icon on-mouseenter="toggle" id="stars-hover-five" icon="[[toggleIcon]]"></iron-icon>
    </div>
 
 
  </template>
 
</dom-module>
 
<script>
 
  Polymer({
 
    is: 'stars-hover',
 
    properties: {
      toggleIcon: {
        type: String,
        value: "icons:star"
      }
    },
 
 
    toggle: function (e) {
      var index_five =  "stars-hover-five");
      index_five.setAttribute("pressed", "");
 
    },
 
    unfill: function () {
 
      var index_five = document.getElementById("stars-hover-five");
      index_five.removeAttribute("pressed");
    }
 
  });
 
</script>

Dans le toggle j'utilise

Code :

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

document.getElementById(

. Et j'ai le sentiment que ce n'est pas dans la façon de faire de Polymer.

Je ne vois pas trop comment gérer ceci. Peut-être utiliser reflecToAttribute le "this.$" ?
Je ne suis absolument pas sûr et un peu d'aide serait la bienvenue.

En vous remerciant d'avance de votre aide.

[NoSmoking]

Bonjour,
as tu consulté ces pages

• Utility functions.
• Local DOM Basics and API