Polimero - Passa voce dom-ripetuta all'interno della funzione su clic

Question

Come si passa un elemento dom-ripetuto all'interno di una funzione in on-click? Il mio codice non funziona:

<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> 

O c'è un approccio migliore per raggiungere qualcosa di simile? Grazie!

Answer 1

Non è possibile passare argomenti direttamente ai metodi su-click, ma è possibile recuperare l'oggetto cliccato all'interno di un modello di dom-repeat tramite l'evento:

<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> 

Vedere la relativa documentazione here.

Answer 2

Risposta breve
L'articolo è il parametro dell'evento: e.model.item

Dal documentation:

Quando si aggiunge un gestore di eventi dichiarativa all'interno del template , il ripetitore aggiunge una proprietà del modello per ogni evento inviato al listener . Il modello è i dati ambito utilizzato per generare l'istanza modello , quindi i dati oggetto è 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> 

Nota: La proprietà modello non è aggiunto per gli ascoltatori di eventi registrati imperativamente (usando addEventListener), o listener aggiunti a uno dei nodi principali del modello . In questi casi, è possibile utilizzare il metodo modelForElement per recuperare i dati del modello che hanno generato un determinato elemento. (Esistono anche i metodi itemForElement e indexForElement corrispondenti.)