Polymer 1.0: How to pass an argument to a Polymer function from an attribute?
Is there a way to pass an argument to a Polymer function from an element attribute inside its ?
-
Just now I got this to work:
<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) -
You could utilize HTML5 data attributes instead. Try like this:
<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>讨论(0) -
Is there a way to pass an argument to a Polymer function from an attribute of an element inside its
<template>.Instead of using an event use a computed binding. Computed bindings can accept literal strings.
Checkout the working example below. In this example a button can be hidden based on the parameter that is passed.
<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>Note: You can get the
idor other attributes of an element that an event is run on throughevent.target. If you are only looking for other attributes as parameters this might also be a valid solution.讨论(0) -
After trying the solutions suggested here which none of them worked, I did a slight modification of @Amit and @Mowzer solutions I got it working like this:
<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>讨论(0) -
Shining more light on a subtle difference mentioned in the comments above.
Notice
$=must be used if reading a data binding.<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; }Inside
dom-repeat, theitem(or whichever name you give it) is available ate.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; }讨论(0) -
Possibly the most robust way to retrieve the argument is as follows:
<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)
加载中...
- 热议问题