I want to open a paper-dialog when click a button. I tried the following 2 approaches:
on-click="dialog.open()
I get this error: [my-app::_createEventHandler]: listener methoddialog.open()not defined
I don't understand whyon-click="onCreateDialogTap": I put onCreateDialogTap event in myapp.js and try to access the dialog element by
document.getElementById('dialog');
I know I cannot access it by this way because it is in local dom. But how do I access it since there are multiple layers of local dom? I can access app-drawer-layout element by using
Polymer.dom(document.querySelector('my-app').root).childNodes[0] //return app-drawer-layout element
but how to access dialog element?
This is my index.html
<body>
<my-app id="myApp"></my-app>
<script src="scripts/myapp.js"></script>
</body>
my-app.html
<dom-module id="my-app">
<template>
<app-drawer-layout fullbleed>
<app-header-layout has-scrolling-region>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div>
</app-toolbar>
</app-header>
<div class="content" style="height:100%;">
<iron-pages attr-for-selected="data-route" selected="{{route}}" style="height:100%;">
<section data-route="home" href="{{baseUrl}}" style="height:100%;">
<paper-button id="button1" raised on-click="dialog.open()">open dialog button1</paper-button>
<paper-button id="button2" raised on-click="onCreateDialogTap">open dialog button2</paper-button>
<paper-dialog id="dialog">
<h2>Dialog Title</h2>
<p>Dialog Content</p>
</paper-dialog>
</section>
<section id="projects" data-route="projects" href="{{baseUrl}}projects" style="height:100%;">
</section>
</iron-pages>
</div>
</app-header-layout>
</app-drawer-layout>
</template>
myapp.js
var app = document.querySelector('my-app');
app.onCreateDialogTap = function(e){
var createDialog = document.getElementById('dialog'); //return null
dialog.open();
}
