polymer 1.0 - Polímero-Pase el elemento repetido dentro de la función de clic.

polymer-1.0

Question

¿Cómo paso un elemento repetido dentro de una función en el clic? Mi código no funciona:

<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 hay un mejor enfoque para lograr algo como esto? ¡Gracias!

Answer 1

No puede pasar argumentos directamente a los métodos de clic, pero puede recuperar el elemento pulsado dentro de una plantilla de repetición de dom a través del 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>

Vea la documentación relevante here .

Answer 2

Respuesta corta
El elemento está en el parámetro de evento: e.model.item

De la documentation :

Cuando agrega un controlador de eventos declarativo dentro de la plantilla, el repetidor agrega una propiedad modelo a cada evento enviado al oyente. El modelo es el alcance de los datos utilizados para generar la instancia de la plantilla, por lo que los datos del elemento son 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 propiedad del modelo no se agrega a los oyentes de eventos registrados de forma imperativa (mediante addEventListener), o se agregan escuchas a uno de los nodos principales de la plantilla. En estos casos, puede usar el método modelForElement para recuperar los datos del modelo que generaron un elemento dado. (También hay métodos correspondientes para itemForElement e indexForElement).