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

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

中元素的属性将参数传递给 Polymer 函数

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

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

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

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

Answer 3

在尝试了此处建议的解决方案（其中 none 有效）之后，我对@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 4

刚才我让这个工作：

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

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

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

Answer 6

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

Answer 7

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

如果纸按钮在模板内，例如

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

然后可以通过传递给函数的事件对象中的 "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 8

进一步阐明上面评论中提到的细微差别。

注意$=如果读取数据绑定必须使用。

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

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

Polymer 1.0: How to pass an argument to a Polymer function from an attribute?

polymer

polymer-1.0

背景研究

之前的尝试