web-dev-qa-db-fra.com

Polymer - Passer l'élément répété par dom dans la fonction on-click

Comment passer un élément répété par dom dans une fonction en un clic? Mon code ne fonctionne pas:

<dom-module id="my-element">

 <template>

   <template is="dom-repeat" items="{{stuff}}>

    <paper-button on-click="_myFunction(item.name)">{{item.name}}</paper-button>

   </template>

 </template>

</dom-module>

<script>
  Polymer({

    is: 'my-element',

    ready: function() {
      this.stuff = [
        { id: 0, name: 'Red' },
        { id: 1, name: 'Blue' },
        { id: 2, name: 'Yellow' },
      ];
    },

    _myFunction: function(color) {
      console.log('You pressed button ' + color);
    },

  })
</script>

Ou existe-t-il une meilleure approche pour réaliser quelque chose comme ça? Merci!

polymer-1.0
21
romerk

Vous ne pouvez pas passer d'arguments directement aux méthodes au clic, mais vous pouvez récupérer l'élément cliqué dans un modèle dom-repeat via l'événement:

<script>
 Polymer({

 is: 'my-element',

 ready: function() {
   this.stuff = [
     { id: 0, name: 'Red' },
     { id: 1, name: 'Blue' },
     { id: 2, name: 'Yellow' },
   ];
 },

 _myFunction: function(e) {
   console.log('You pressed button ' + e.model.item.name);
 },

});
</script>

Voir la documentation appropriée ici .

45
pikanezi

Réponse courte
L'élément est dans le paramètre d'événement: e.model.item

Dans la documentation :

Lorsque vous ajoutez un gestionnaire d'événements déclaratif à l'intérieur du modèle, le répéteur ajoute une propriété de modèle à chaque événement envoyé à l'écouteur. Le modèle est les données d'étendue utilisées pour générer l'instance de modèle, les données d'élément sont donc model.item:

<dom-module id="simple-menu">

  <template>
    <template is="dom-repeat" id="menu" items="{{menuItems}}">
        <div>
          <span>{{item.name}}</span>
          <span>{{item.ordered}}</span>
          <button on-click="order">Order</button>
        </div>
    </template>
  </template>

  <script>
    Polymer({
      is: 'simple-menu',
      ready: function() {
        this.menuItems = [
            { name: "Pizza", ordered: 0 },
            { name: "Pasta", ordered: 0 },
            { name: "Toast", ordered: 0 }
        ];
      },
      order: function(e) {
        var model = e.model;
        model.set('item.ordered', model.item.ordered+1);
      }
    });
  </script>

</dom-module>

Remarque: La propriété de modèle n'est pas ajoutée pour les écouteurs d'événements enregistrés impérativement (à l'aide d'addEventListener), ou les écouteurs ajoutés à l'un des nœuds parents du modèle. Dans ces cas, vous pouvez utiliser la méthode modelForElement pour récupérer les données de modèle qui ont généré un élément donné. (Il existe également des méthodes itemForElement et indexForElement correspondantes.)

7
pomber