如何在按钮 onclick 或锚标记点击时调用 polymer 2.0 中的函数?

How to call a function in polymer 2.0 on button onclick or anchor tag click?

我看到了像 Compute function 这样的功能,我可以在其中使用一个函数来计算相同的东西,然后将某些东西重新运行到该文本内容区域,但是如何在按钮 onclick 或锚点 onclick 上使用它们。

例如:

<dom-module id="x-custom">

  <template>
    My name is <span>[[_formatName(first, last)]]</span>
  </template>

  <script>
    class XCustom extends Polymer.Element {
      static get is() {return 'x-custom'}
      static get properties() {
        return {
          first: String,
          last: String
        }
      }
      _formatName(first, last) {
        return `${last}, ${first}`;
      }

    }

    customElements.define(XCustom.is, XCustom);
  </script>

</dom-module>

在这种情况下,_formatName 被操纵,我们在 html 中得到结果。

但是如何在按钮 onclick 和

  1. 这样我就可以操纵发送一些 http 请求。
  2. 也在函数内部操作一些数据。

聚合物 2.0

我得到了答案。首先,对于双向绑定,您还可以检查 polymer 1.0 文档中的数据绑定,简而言之。

然后您可以阅读 polymer 2.0 文档,但我在那里没有看到更多关于数据绑定事件的信息。

我会说两个都读。 https://www.polymer-project.org/1.0/docs/devguide/templates https://www.polymer-project.org/2.0/docs/devguide/templates

这有自定义事件的例子。 https://www.polymer-project.org/2.0/docs/devguide/events.html#custom-events

<dom-module id="x-custom">
  <template>
    <button on-click="handleClick">Kick Me</button>
  </template>
  <script>
    class XCustom extends Polymer.Element {

      static get is() {return 'x-custom'}

      handleClick() {
        console.log('Ow!');
      }
    }
    customElements.define(XCustom.is, XCustom);
  </script>
</dom-module>

此外,如果你想将参数传递给函数,你可以这样做。

<dom-module id="x-custom">
      <template>
        <button on-click="handleClick" data-args="arg1,arg2">Kick Me</button>
      </template>
      <script>
        class XCustom extends Polymer.Element {

          static get is() {return 'x-custom'}

          handleClick(e) {
            console.log('Ow!');
            console.log(e.target.getAttribute('data-args'));
           // now you got args you can use them as you want
          }
        }
        customElements.define(XCustom.is, XCustom);
      </script>
    </dom-module>