如何在模板聚合物中使用元素函数？

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

To add event listeners to local DOM children, use on-event annotations in your template. This often eliminates the need to give an element an id solely for the purpose of binding an event listener.

来源：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 知道它应该调用父元素中的函数。

如何在模板聚合物中使用元素函数？

How to use a element function in template polymer?

javascript

web-component

polymer

polymer-1.0