如何在按钮 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 和
- 这样我就可以操纵发送一些
http
请求。
- 也在函数内部操作一些数据。
聚合物 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>
我看到了像 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 和
- 这样我就可以操纵发送一些
http
请求。 - 也在函数内部操作一些数据。
聚合物 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>