如何为基于聚合物的网页创建点击事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何为基于聚合物的网页创建点击事件相关的知识，希望对你有一定的参考价值。
道歉是高级的，但我是Polymer的一个完整的菜鸟。
到目前为止，我已经完成了一个html文件（被视为外部对话框），其中包含一些内容。
首先，用户单击主页面上的按钮，然后显示一个对话框。在对话框中，用户将键入文本（此时，任何内容），然后单击提交按钮。此时，要么成功，要么文本框为空，抛出错误，选择文本框，并且（如果可能）变为红色/显示错误消息。
不幸的是，即使让聚合物事件失败也让我失望。
到目前为止，这是我的代码：
主页（工作正常）：
<!DOCTYPE HTML>
<html>
<head>
<link rel="import" href="elements/accountability-ticket.html"/>
</head>
<body>
<section>
<paper-button raised label="Buy Now" id="ticket" onclick="clickHandler('diagTicket')">Buy Now</paper-button>
</section>
<section><accountability-ticket></accountability-ticket></section>
<script>
window.addEventListener('WebComponentsReady', function(e) {
// imports are loaded and elements have been registered
console.log('Components are ready');
});
function clickHandler(e) {
var dialog = document.getElementById(e);
if (dialog) {
dialog.open();
}
}
</script>
</body>
</html>
那里有一个按钮，“立即购买”，它将下面的代码称为弹出对话框：
<dom-module id="accountability-ticket">
<template>
<paper-dialog with-backdrop entry-animation="scale-up-animation"
exit-animation="fade-out-animation" id="diagTicket">
<h2>I Own It Ticket </h2>
<div class="ctrlButtons flex">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm>Submit</paper-button>
</div>
</paper-dialog>
</template>
</dom-module>
<script>
Polymer({
is: "accountability-ticket"
});
</script>
根据我的在线搜索，要点击按钮检查文本框是否为空，我首先需要一个eventHandler。我明白我应该这样做：
on-click="confirmClick"
在<paper-button dialog-confirm>Submit</paper-button>。
大概在<script>部分，这个：
Polymer('my-element', {
confirmClick: function() {
alert('Click event triggered');
});
但鉴于我已经有了这个：
Polymer({
is: "accountability-ticket"
});
上面，到目前为止，我尝试将confimClick放入其中会导致整个对话框在用户点击“立即购买”时不显示，我不知道该怎么做。
目前，我如何设置点击事件？谢谢。
要注册事件处理程序，请删除双括号。
<paper-button on-click="confirmClick">Confirm</paper-button>
更新
感谢更新。我现在意识到你正在尝试在Polymer元素之外的主页面上设置click处理程序。上面的语法仅适用于<dom-module>。但是，您可以使用“传统”方法来设置事件处理程序。
window.addEventListener('WebComponentsReady', function(e) {
// imports are loaded and elements have been registered
document.querySelector("#ticket").addEventListener("click", clickHandler);
});
function clickHandler(e) {
// your code here
}
更新
另一方面，如果您位于Polymer元素内，则可以将事件处理程序添加到原型中。注册处理程序的id中的dom-module必须与原型中的is属性相匹配（在本例中为责任票）。假设你的模块看起来像这样：
<dom-module id="accountability-ticket">
<template>
<paper-button on-click="confirmClick">Confirm</paper-button>
</template>
</dom-module>
您可以通过以下方式将处理程序添加到原型中：
<script>
Polymer({
is: "accountability-ticket",
confirmClick: function(event){
console.log(event);
}
});
</script>>
在组件之外，您可以使用标准javascript以声明方式执行此操作。
- 使用onclick而不是点击。这将注册一个标准的dom监听器。
- 使用标准的内联javascript来调用您的方法。
<paper-button onclick="confirmClick()">Confirm</paper-button>
<script>
function confirmClick(e) {}
</script>以上是关于如何为基于聚合物的网页创建点击事件的主要内容，如果未能解决你的问题，请参考以下文章