I have the following page defined
<!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=':400,700' rel='stylesheet' type='text/css'>
<script src="bower_ponents/webponentsjs/webponents-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>
For pleteness here is the elements.html file
<!-- Iron -->
<link rel="import" href="../bower_ponents/iron-icons/iron-icons.html">
<!-- Paper Elements -->
<link rel="import" href="../bower_ponents/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../bower-ponents/paper-header-panel/paper-header-panel.html">
<link rel="import" href="../bower_ponents/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_ponents/paper-input/paper-input.html">
<link rel="import" href="../bower_ponents/paper-styles/paper-styles.html">
<link rel="import" href="../bower_ponents/paper-toolbar/paper-toolbar.html">
I am moving to Polymer 1.0 and have just created the page above. The 'script handler called' alert is showing but the ready callback is not firing and when I click on the search button the searchhandler function is not being called.
Can anyone give me an idea where I am going wrong?
I have the following page defined
<!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./css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<script src="bower_ponents/webponentsjs/webponents-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>
For pleteness here is the elements.html file
<!-- Iron -->
<link rel="import" href="../bower_ponents/iron-icons/iron-icons.html">
<!-- Paper Elements -->
<link rel="import" href="../bower_ponents/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../bower-ponents/paper-header-panel/paper-header-panel.html">
<link rel="import" href="../bower_ponents/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_ponents/paper-input/paper-input.html">
<link rel="import" href="../bower_ponents/paper-styles/paper-styles.html">
<link rel="import" href="../bower_ponents/paper-toolbar/paper-toolbar.html">
I am moving to Polymer 1.0 and have just created the page above. The 'script handler called' alert is showing but the ready callback is not firing and when I click on the search button the searchhandler function is not being called.
Can anyone give me an idea where I am going wrong?
Share Improve this question edited Jun 17, 2015 at 15:55 Paul S Chapman asked Jun 17, 2015 at 15:31 Paul S ChapmanPaul S Chapman 83210 silver badges37 bronze badges1 Answer
Reset to default 6See here for the migration guide. For your event not firing see here
Curly brackets ({{}}) are not used for declarative event handlers in the template.
Your code should be:
<paper-icon-button icon="search" on-tap="srchandler"></paper-icon-button>
Your element registration needs to also now change. See here
<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>