web-dev-qa-db-fra.com

Polymer 1.0: Comment passer un argument à une fonction Polymer à partir d'un attribut?

Y a-t-il un moyen de passer un argument à une fonction Polymer à partir d'un attribut d'élément dans son <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>

Recherche en arrière plan

J'ai parcouru la documentation qui semble silencieuse à ce sujet. Il ne dit pas si vous pouvez ou ne pouvez pas. Mais quand je l'essaie, ça échoue. Mais peut-être que je ne le fais pas correctement. J'ai donc besoin d'aide.

La seule chose que j'ai rencontrée est les auditeurs d'événements qui ne semblent pas être en mesure de prendre les arguments que je veux passer. Disons une id ou une name.

Tentatives précédentes

J'ai essayé (sans succès) de faire des choses comme:

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

mais rien ne semble fonctionner.

L'idée des auditeurs d'événement ne fonctionne pas car ils limitent les arguments et je ne peux pas obtenir, disons, id dont j'ai besoin.

polymerpolymer-1.0
37
Mowzer

Vous pouvez utiliser les attributs de données HTML5 à la place. Essayez comme ça:

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

Après avoir beaucoup cherché, j'ai trouvé ce que je pense être la solution la plus propre possible.

Si le bouton de papier est à l’intérieur d’un modèle, par exemple.

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

Ensuite, les propriétés sont accessibles via la propriété "model" dans un objet événement transmis à function.

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'));
}
44
Vaibhav Arora

Faire la lumière sur une différence subtile mentionnée dans les commentaires ci-dessus.

La notice $= doit être utilisée lors de la lecture d'une liaison de données.

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

Dans dom-repeat, la item (ou le nom que vous lui donnez) est disponible à 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;
}
7
Jacob Phillips

Existe-t-il un moyen de passer un argument à une fonction Polymer à partir d'un attribut d'un élément dans son <template>.

Au lieu d'utiliser event, utilisez une liaison calculée . Les liaisons calculées peuvent accepter des chaînes littérales.

Consultez l'exemple de travail ci-dessous. Dans cet exemple, un bouton peut être masqué en fonction du paramètre transmis.

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

Remarque: Vous pouvez obtenir la id ou d'autres attributs d'un élément sur lequel un événement est exécuté via event.target. Si vous recherchez uniquement d'autres attributs en tant que paramètres, cela pourrait également être une solution valable. 

1
coderfin

Après avoir essayé les solutions suggérées ici, aucune d'entre elles ne fonctionnant, j'ai légèrement modifié les solutions @Amit et @Mowzer.

<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>
1
Waleed Asender

Le moyen le plus robuste de récupérer l'argument est probablement le suivant:

<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');
  ...
}
0
Mowzer

Tout à l'heure, j'ai ce que cela fonctionne:

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

Selon la situation, la méthode la plus simple consiste à utiliser dom-repeat . Si vous pouvez formater vos données sous forme de tableau d'objets, vous pouvez simplement utiliser e.model pour tout obtenir.

0
mullens