Question

有没有办法将参数从其<template>内的元素属性传递给Polymer函数？

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

背景研究

我已经梳理了the documentation，对此事表现得很平静。它没有说你是否可以。但是当我尝试它时，它失败了。但也许我没有正确地做到这一点。所以我需要一些帮助。

我唯一遇到的是event listeners，它似乎无法接受我想传递的参数。比方说，id或name。

以前的尝试

我尝试过（不成功）做以下事情：

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

但似乎没有任何效果。

事件听众的想法不起作用，因为他们限制了论点，我无法得到，比如id我需要。

Answer 1

您可以改用HTML5数据属性。试试这样：

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

经过大量搜索，我发现了我认为最干净的解决方案。

如果纸质按钮位于模板内，例如

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

然后可以通过传递给function的事件对象中的“model”属性访问属性。

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 3

对上述评论中提到的微妙差异有更多的了解。

如果读取数据绑定，则必须使用$=。

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

在dom-repeat内，item（或您提供的任何名称）可在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 4

是否有办法将参数从其<template>内的元素的属性传递给Polymer函数。

使用 computed binding ，而不是使用事件。计算绑定可以接受文字字符串。

查看下面的工作示例。在此示例中，可以根据传递的参数隐藏按钮。

＆＃13;

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

＆＃13;

注意：您可以通过id获取运行事件的元素的event.target或其他属性。如果您只是寻找其他属性作为参数，这也可能是一个有效的解决方案。

Answer 5

在尝试了这里没有提供的解决方案后，我对@Amit和@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>

Answer 6

刚才我开始工作了：

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

检索参数的最可靠方法可能如下：

{{1}}

Answer 8

根据具体情况，干净的方法通常是使用dom-repeat。如果您可以将数据格式化为对象数组，则可以使用e.model来获取所有内容。

Polymer 1.0：如何从属性中将参数传递给Polymer函数？

背景研究

以前的尝试

8 个答案: