Question

高级道歉，但我是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"

<{1>}中的

。

大概在<paper-button dialog-confirm>Submit</paper-button>部分，这个：

<script>

但鉴于我已经有了这个：

Polymer('my-element', {
    confirmClick: function() {
    alert('Click event triggered');
});

以上，到目前为止，我尝试将Polymer({ is: "accountability-ticket" });放入其中会导致整个对话框在用户点击“立即购买”时无法显示，我不知道该怎么做。

目前，如何设置点击事件？感谢。

Answer 1

在组件之外，您可以使用标准Javascript以声明方式执行此操作。

使用onclick而不是点击。这将注册一个标准的dom监听器。
使用标准的内联javascript来调用您的方法。

＆＃13;

<paper-button onclick="confirmClick()">Confirm</paper-button>

<script>
  function confirmClick(e) {}
</script>

＆＃13;

如果符合您的需要，您也可以内联代码而不是调用全局方法。

＆＃13;

<paper-button onclick="document.getElementById('drawer').open()">Open Drawer</paper-button>

＆＃13;

如何为基于聚合物的网页创建点击事件

1 个答案: