Question

如何将参数传递给带注释的事件侦听器？

我有这段代码：

<paper-button id="bt_close" raised on-tap="close">
  Close first movement
</paper-button>

我尝试使用某个参数调用close函数（例如on-tap="close(1)"或close(2)或close(custom_parameter)，依此类推。）

我的close功能是：

close: function (p) {
  console.log(p);
}

但是我在控制台中看到了这个错误：

侦听器方法close(1)未定义

Answer 1

event annotation需要Polymer对象定义中的方法名称。在运行时，Polymer按名称逐字查找方法，因此在方法名称中包含参数会导致查找失败，并且您会看到您提到的控制台错误。

要指定参数，您可以使用data attribute，如下所示：

// template
<paper-button on-tap="close" data-foo="1">Close</paper-button>

// script
Polymer({
  _close: function(e) {
    const foo = e.target.dataset.foo;
    // do something with foo
  }
  ...
});

＆＃13;

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    _close: function(e) {
      const foo = e.target.dataset.foo;
      console.log('foo', foo);
    }
  });
});

＆＃13;

<head>
  <base href="https://cdn.rawgit.com/download/polymer-cdn/1.8.0/lib/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="paper-button/paper-button.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <paper-button on-tap="_close" data-foo="1">Close</paper-button>
    </template>
  </dom-module>
</body>

＆＃13;

codepen

如何将参数传递给Polymer事件监听器？

1 个答案: