Polimer - Przekaż element powtarzany przez dom w ramach funkcji kliknięcia.

Question

Jak przekazać element powtarzany przez dom w funkcji jednym kliknięciem? Mój kod nie działa:

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

Czy istnieje lepsze podejście do osiągnięcia czegoś takiego? Dzięki!

Answer 1

Nie można przekazywać argumenty bezpośrednio do metod na kliknięcie, ale można odzyskać przedmiot kliknięciu wewnątrz szablonu DOM-repeat poprzez wydarzenia:

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

Zobacz odpowiedniej dokumentacji here.

Answer 2

Krótka odpowiedź
Rzecz jest w parametrze zdarzenia: e.model.item

Z documentation:

Po dodaniu deklaratywny obsługi zdarzeń wewnątrz szablonu , repeater dodaje właściwość modelu dla każdego zdarzenia wysłana do odbiornika . Model jest zakres dane wykorzystywane do generowania instancji szablonu , więc dane pozycja jest 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> 

Uwaga: Właściwość model nie jest dodawany do detektorów zdarzeń zarejestrowanych bezwzględnie (przy użyciu addEventListener) lub detektory dodawane do jednego z węzłów nadrzędnych szablonu. W takich przypadkach można użyć metody modelForElement do pobrania danych modelu , które wygenerowały dany element. (Są również odpowiednie pozycje itemForElement i indexForElement.)