Polymère 1.0: Comment passer d'un argument à un Polymère à fonction d'un attribut?

Est-il un moyen de passer un argument à un Polymère à fonction d'un attribut d'élément à l'intérieur de 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>

Arrière-Plan De La Recherche

J'ai passé au peigne fin la documentation qui apparaît silencieux sur la question. Cela ne veut pas dire que vous pouvez ou ne pouvez pas. Mais quand je l'ai essayer, il échoue. Mais peut-être que je ne suis pas le faire correctement. Donc j'ai besoin d'aide.

La seule chose que j'ai rencontré est les écouteurs d'événement qui ne semble pas être en mesure de prendre les arguments que je veux passer. Dire, un id ou un name.

Précédentes Tentatives

J'ai essayé (sans succès) en faisant des choses comme:

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

mais rien ne semble fonctionner.

Les écouteurs d'événement idée ne fonctionne pas parce qu'ils limitent les arguments et je ne peux pas obtenir de la, dire, id j'ai besoin.

  • Un associé dit: Toujours une chaîne de caractères comme dans votre exemple? Vous pourriez faire quelque chose comme on-tap="bar" data-bar="foo", puis dans votre gestionnaire d'événements, e.srcElement.getAttribute('data-bar'). Vous ne pouvez pas passer un argument comme vous avez essayé de faire.
InformationsquelleAutor Mowzer | 2015-07-15
  1. 45

    Vous pourriez utiliser HTML5 attributs de données à la place. Essayez comme ceci:

    <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>
    • En fait, j'ai eu à utiliser Polymer.dom(e).path[2].getAttribute('data-args'). Voir ici: polymer-project.org/1.0/docs/devguide/events.html#retargeting Réponse acceptée!
    • e.target.dataset.args a travaillé pour moi et me regarde d'un peu plus propre.
    • vous avez raison. c'est mieux un nettoyeur de syntaxe, et étant donné que j'ai moi-même écrit en HTML5, il est légitime d'utiliser. Mais en réalité, si pas à l'aide de la dataset de la propriété et de le faire comme je l'ai fait, vous obtenez une meilleure compatibilité descendante.
    • Qu'est-ce que l'argument est à partir de la propriété, comme: les données-args="{{some_prop}}", dans le haut solutions ne sont pas de travail. Une idée? (ping @Amit @Mowzer)
    • fondé, doit être: données args$="{{some_prop}}" polymer-project.org/1.0/docs/devguide/...
    • J'ai utilisé l'e.cible.dataArgs et travaillé (peut-être une version plus récente?)

    InformationsquelleAutor Amit
  2. 44

    Après la recherche d'un lot, j'ai trouvé ce que je pense est la meilleure solution possible.

    Si le papier-bouton 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>

    Alors les propriétés peuvent être accessibles via le "modèle" de la propriété dans l'objet d'événement transmis à la fonction.

    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'));
}
    • En fait c'est la réponse correcte à l'aide de Polymère 1.7.0 Api, la réponse précédente est maintenant obsolète
    • Avec la vitesse de ce cadre est en cours, le dépassement de la pile peut être trompeur à la fois :).
    • Je pense que c'est vrai pour tous les cadre... Pour tout cela compte, je vais être actif ici, de répondre à autant de questions que je rencontre, tout en développant depuis que je suis en train de travailler sur des Polymères pour mon week-end projets ...
    • Dans item.task, ce qui ne task signifie? Ne pouvais pas le trouver dans le modèle mentionné ci-dessus.
    • C'est en fait la version correcte pour le Polymère >= 1.x Donc, ce devrait être marquée comme étant correcte, en fonction de Polymère docs
    • Il a travaillé pour moi... et je pense que peut-être la meilleure approche.
    • Cela ressemble vraiment lié à la dom-fonction repeat seulement: polymer-project.org/2.0/docs/devguide/templates#handling-events

    InformationsquelleAutor Vaibhav Arora
  3. 9

    Brille plus de lumière sur une différence subtile mentionné dans les commentaires ci-dessus.

    Avis $= doit être utilisé si 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;
}

    À l'intérieur de dom-repeat, le item (ou quel que soit 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;
}
    InformationsquelleAutor Jacob Phillips
  4. 2

    Est-il un moyen de passer un argument à un Polymère à fonction d'un attribut d'un élément à l'intérieur de son <template>.

    Au lieu d'utiliser un événement utiliser un calculée de liaison. Calculé liaisons peuvent accepter des chaînes de caractères littérales.

    La caisse de l'exemple ci-dessous. Dans cet exemple, un bouton peut être caché en fonction du paramètre qui est passé.

    HTML:

    <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 le id ou d'autres attributs d'un élément d'un événement est exécuté par event.target. Si vous cherchez d'autres attributs que les paramètres de ce pourrait également être une solution valable.

    • Hmm... cela devrait être la bonne réponse. Simple et clair.
    InformationsquelleAutor coderfin
  5. 1

    Après avoir essayé les solutions proposées ici, qui n'a pas fonctionné, j'ai fait une légère modification de @Amit et @Mowzer solutions je l'ai eu à travailler comme cela:

    <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>
    InformationsquelleAutor Waleed Asender
  6. 0

    Juste maintenant, je suis à ce travail:

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

    Peut-être le plus robuste de manière à récupérer l'argument est comme suit:

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

    Selon la situation, le propre façon de le faire est généralement à l'aide d' dom-répéter. Si vous pouvez mettre en forme vos données dans un tableau d'objets, vous pouvez simplement utiliser l'e.modèle pour tout.

    • Pouvez-vous donner un exemple de code à démontrer?
    InformationsquelleAutor mullens