valor - Polymer 1.0: ¿Cómo pasar un argumento a una función Polymer desde un atributo?

pase por valor

Question

¿Hay alguna manera de pasar un argumento a una función Polymer desde un atributo de elemento dentro de su <template> ?

<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html" />
<dom-module id="example-element">
  <template>
    ...
    <paper-button id="foo" on-tap="bar">Click</paper-button>
    ...
  </template>
</dom-module>
<script>
  (function() {
    Polymer({
      is: ''example-element'',
      properties: {...},
      bar: function(arg){
        // Do stuff using argument arg
      }
    });
  })();
</script>

Investigación de fondo

He revisado la documentación que parece silenciosa al respecto. No dice si puedes o no puedes. Pero cuando lo intento, falla. Pero tal vez no lo estoy haciendo correctamente. Entonces necesito ayuda.

Lo único que me he encontrado son los oyentes de eventos que no parecen poder tomar los argumentos que quiero transmitir. Digamos, una id o un name .

Intentos previos

He intentado (sin éxito) hacer cosas como:

<paper-button id="foo" on-tap="bar(''foo'')"> Click </paper-button>

Pero nada parece funcionar.

La idea de los oyentes de eventos no funciona porque limitan los argumentos y no puedo obtener la, por ejemplo, la id que necesito.

Answer 1

¿Hay alguna manera de pasar un argumento a una función Polymer desde un atributo de un elemento dentro de su <template> ?

En lugar de usar un evento, use un enlace calculado . Los enlaces calculados pueden aceptar cadenas literales.

Vea el ejemplo de trabajo a continuación. En este ejemplo, se puede ocultar un botón en función del parámetro que se pasa.

<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html" />
<dom-module id="example-element">
 <template>
  <button id="foo-one" on-tap="barEvent">Click foo-one</button>
  <button id="foo-two" hidden="{{barTest(''value-two'')}}">Click foo-two</button>
  <button id="foo-three" hidden="{{barTest(''value-three'')}}">Click foo-three</button>
 </template>
</dom-module>
<script>
 Polymer({
  is: "example-element",
  barEvent: function (event) {
   console.log(event.target.id);
  },
  barTest: function (arg) {
   if (arg === "value-two") {
    return true;
   } else {
    return false;
   }
  }
 });
</script>

<example-element></example-element>

Nota: Puede obtener la id u otros atributos de un elemento en el que se ejecuta un evento a través de event.target . Si solo está buscando otros atributos como parámetros, esta también podría ser una solución válida.

Answer 2

Brillar más luz sobre una sutil diferencia mencionada en los comentarios anteriores.

Aviso $= debe usarse si se lee un enlace de datos.

<paper-button on-tap="_handleTap" data-foo="foo" data-bar$="[[bar]]">Tap</paper-button>

...

_handleTap: function(e) {
  var foo = e.target.dataset.foo;
  var bar = e.target.dataset.bar;
}

Dentro de dom-repeat , el item (o el nombre que le des) está disponible en e.model.item .

<template is="dom-repeat" items="[[items]]" as="someItem">
  <paper-button on-tap="_handleTap">Tap</paper-button>
</template>

...

_handleTap: function(e) {
  var item = e.model.someItem;
}

Answer 3

Dependiendo de la situación, la forma limpia de hacerlo es usualmente usando dom-repeat . Si puede formatear sus datos como una matriz de objetos, puede usar e.model para obtener todo.

Answer 4

Después de buscar mucho, encontré lo que creo que es la solución más limpia posible.

Si el botón de papel está dentro de una plantilla, p. Ej.

<template is="dom-repeat" items="{{allItems}}" as="item">
 <paper-button on-tap="itemTapped">[[item.text]]</paper-button>
</template>

Luego se puede acceder a las propiedades a través de la propiedad "modelo" en el objeto de evento pasado a la función.

itemTapped: function(oEvent){
// oEvent.model.get is the getter for all properties of "item" in your bound array
console.log(oEvent.model.get(''item.task''));
}

Answer 5

Después de probar las soluciones sugeridas aquí, que ninguna de ellas funcionó, hice una ligera modificación de las soluciones @Amit y @Mowzer y conseguí que funcionara así:

<dom-module id="dial-buttons">

    <template>
        <div on-click="handleClick" data-args="0, num-input">
            <p>0</p>
            <paper-ripple></paper-ripple>
        </div>
    </template>

    <script>
        Polymer({
            is: ''dial-buttons'',
            properties: { ... },
            handleClick: function(e) {
                var args = Polymer.dom(e).path[1].getAttribute(''data-args'').split('','');
                alert(args[0] + args[1]);
            }
        });
    </script>

</dom-module>

Answer 6

En su lugar, puede utilizar atributos de datos HTML5. Intenta así:

<paper-button id="foo" on-tap="bar" data-args="foo,some other value,2">Click</paper-button>
...
<script>
(function() {
  Polymer({
    is: ''example'',
    properties: {...},
    bar: function(e){
      var args = e.target.getAttribute(''data-args'').split('','');
      // now args = [''foo'', ''some other value'', ''2'']
    }
  });
})();
</script>

Answer 7

Justo ahora tengo esto para trabajar:

<paper-button id="foo" on-tap="bar" data-args="baz,qux,quux">Click</paper-button>
...
<script>
(function() {
  Polymer({
    is: ''example'',
    properties: {...},
    bar: function(e){
      var args = e.target.dataset.args.split('',''); // [''baz'', ''qux'', ''quux'']
    }
  });
})();
</script>

Answer 8

Posiblemente, la forma más sólida de recuperar el argumento es la siguiente:

<paper-button on-tap="_getArgs"
              data-args="foo,bar,qux">Click</paper-button>
...
_getArgs: function(e) {
  var args = Polymer.dom(e).rootTarget.getAttribute(''data-args'');
  ...
}