Question

我想使用元素中定义的函数。像这样：

<template>
<span onclick="this.parentElement.test();"></span>
</template>

<script>
Polymer({
  is: 'test-ele',
  test: function() {
    console.log('This is a test message.')
  }
})
</script>

是否有类似的方法？

<template>
<span onclick="{{{test}}}"></span>
</template>

Answer 1

要向本地DOM子级添加事件侦听器，请在模板中使用 on- 事件 注释。这通常消除了仅为了绑定事件监听器而赋予元素id的需要。

来源：https://www.polymer-project.org/1.0/docs/devguide/events.html#annotated-listeners

<dom-module id="test-ele">
  <template>
    <span on-click="test">Click Here</span>
  </template>

  <script>
    Polymer({
      is: 'test-ele',
      test: function() {
        console.log('This is a test message.');
      }
    });
  </script>
</dom-module>

Answer 2

简单的答案是no, you can't。 <span onclick="{{{test}}}"></span>会尝试启动函数{{{test}}}，而不是将其作为模板变量读取。

此外，你的第一个例子是错误的。

<template>
<span onclick="this.parentElement.test();"></span>
</template>

将尝试加载this.parentElement.test();作为函数。只需使用

<template>
<span onclick="test"></span>
</template>

Polymer知道它应该调用父元素中的函数。

如何在模板聚合物中使用元素功能？

2 个答案: