单击事件未在聚合物纸图标按钮中触发

Click event not firing in polymer paper-icon-button

本文关键字：按钮 图标 事件 聚合物 单击      更新时间：2023-09-26

>我定义了以下页面

<!DOCTYPE html>
<html>
<head>
    <title>Practice List</title>
    <link rel="import" href="elements/elements.html" />
    <link rel="stylesheet" type="text/css" href="Styles/styles.css" />
    <!-- google fonts definitions -->
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
</head>
<body unresolved class="fullbleed layout vertical">
    <dom-module id="app">
        <template>
            <paper-drawer-panel>
                <paper-header-panel main mode="waterfall-tall">
                    <paper-toolbar id="mainToolbar">
                        <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
                        <span class="flex"></span>
                        <paper-icon-button icon="search" on-tap="srchandler"></paper-icon-button>
                        <input type="text" id="searchText" style="width:200px; background:#3180ed;line-height:20px;border:solid 1px #4d90eb; border-radius:6px; padding:3px;color:#fff;" />
                        <div class="middle paper-font-display2 app-name ident">Practice List</div>
                    </paper-toolbar>
                </paper-header-panel>
            </paper-drawer-panel>
        </template>
        <script>
            Polymer({
                is: "app",
                ready: function () {
                    alert('Ready!!!!');
                },
                srchandler: function () {
                    alert('Search clicked');
                }
            });
        </script>
    </dom-module>
</body>
</html>

为了完整起见，这里是元素.html文件

<!-- Iron -->
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<!-- Paper Elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../bower-components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-styles/paper-styles.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">

我正在转向聚合物 1.0，并且刚刚创建了上面的页面。显示"调用脚本处理程序"警报，但ready回调未触发，当我单击搜索按钮时，未调用searchhandler函数。

谁能告诉我我哪里出错了？

有关迁移指南，请参阅此处。对于您的活动未触发，请参阅此处

大括号 （{{}}） 不用于模板中的声明性事件处理程序。

您的代码应该是：

<paper-icon-button icon="search" on-tap="srchandler"></paper-icon-button>

您的元素注册现在也需要更改。看这里

<body unresolved class="fullbleed layout vertical">
    <dom-module id="my-app">
        <template>
        <!-- your template here -->
            <paper-drawer-panel>
                <paper-header-panel main mode="waterfall-tall">
                    <paper-toolbar id="mainToolbar">
                        <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
                        <span class="flex"></span>
                        <paper-icon-button icon="search" on-tap="srchandler"></paper-icon-button>
                        <input type="text" id="searchText" style="width:0px;visibility:hidden;" />
                        <div class="middle paper-font-display2 app-name ident">Practice List</div>
                    </paper-toolbar>
                </paper-header-panel>
            </paper-drawer-panel>
        </template>
        <script>
            Polymer({
                is: "my-app",
                ready: function () {
                    alert('Ready!!!!');
                },
                srchandler: function () {
                    alert('Search clicked');
                }
            });
        </script>
    </dom-module>
    <my-app></my-app>
</body>
相关文章：