Polymer paper-dialog.open() is not defined

问题

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 method dialog.open() not defined
I don't understand why
on-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();
  }

来源：https://stackoverflow.com/questions/40241510/polymer-paper-dialog-open-is-not-defined

标签

javascript

polymer