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