ポリマーの紙ダイアログが機能していないが

Question

を開くことができない私は、紙-FABが下の画像にタップされたときに自分自身を明らかにする紙ダイアログボックスを実装しようとしています紙のダイアログを開きます。私は、次のように私のアプリに紙ダイアログを実装している

：

<link rel="import" href="../bower_components/polymer/polymer.html"> 
 
<link rel="import" href="../bower_components/polymerfire/firebase-query.html"> 
 
<link rel="import" href="../bower_components/paper-fab/paper-fab.html"> 
 
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html"> 
 
<link rel="import" href="../bower_components/polymerfire/firebase-auth.html"> 
 
<link rel="import" href="shared-styles.html"> 
 

 
<dom-module id="my-view1"> 
 
    <template> 
 
    <style include="shared-styles"> 
 
     :host { 
 
     display: block; 
 

 
     padding: 10px; 
 
     } 
 

 
     paper-fab{ 
 
     position:fixed; 
 
     right:20px; 
 
     bottom:68px; 
 
     --paper-fab-keyboard-focus-background:--accent-color; 
 
     } 
 
    </style> 
 
    <firebase-auth 
 
     id="auth" 
 
     user="{{user}}" 
 
     provider="" 
 
     status-known="{{statusKnown}}" 
 
     on-error="handleError"> 
 
    </firebase-auth> 
 
    <firebase-query 
 
     id="query" 
 
     path="/posts" 
 
     data="{{posts}}"> 
 
    </firebase-query> 
 
    <div class="card"> 
 
     <h1>Post</h1> 
 

 
     <ul id="post-list"> 
 
     <template is="dom-repeat" items="[[posts]]" as="post"> 
 
      <li> 
 
      <p class="content">[[post.body]]</p> 
 
      </li> 
 
     </template> 
 
     </ul> 
 

 
    </div> 
 
    <paper-fab icon="add" onclick="dialog.open()"></paper-fab> 
 

 
    <paper-dialog id="dialog"> 
 
     <paper-textarea id="post" label="Write your post here..."></paper-textarea> 
 
     <paper-button dialog-dismiss>Cancel</paper-button> 
 
     <paper-button on-tap="post" id="btnPost" raised class="indigo" hidden$="[[!user]]">Post</paper-button> 
 
    </paper-dialog> 
 
    </template> 
 

 
    <script> 
 
    Polymer({ 
 
     is: 'my-view1', 
 
     properties:{ 
 
     user:{ 
 
      type: Object 
 
     }, 
 
     statusKnown:{ 
 
      type: Object 
 
     }, 
 
     posts: { 
 
      type: Object 
 
     } 
 
     }, 
 
     post: function() { 
 
     this.$.query.ref.push({ 
 
      "Uid": this.user.uid, 
 
      "body": this.$.post.value 
 
     }); 
 
     this.$.post.value = null; 
 
     } 
 
    }); 
 
    </script> 
 
</dom-module>

<paper-fab icon="add" onclick="dialog.open()"></paper-fab> 
 

 
    <paper-dialog id="dialog"> 
 
     <paper-textarea id="post" label="Write your post here..."></paper-textarea> 
 
     <paper-button dialog-dismiss>Cancel</paper-button> 
 
     <paper-button on-tap="post" id="btnPost" raised class="indigo" hidden$="[[!user]]">Post</paper-button> 
 
    </paper-dialog>

このスニペットは、ここでは、このページ上のデモから取られています。

https://www.webcomponents.org/element/PolymerElements/paper-dialog/v1.1.0/demo/demo/index.html

が、私は実際に紙のファブをタップしたときに、私は次のエラーを取得する：

Uncaught ReferenceError: dialog is not defined at HTMLElement.onclick (view3:1) onclick @ view3:1

誰もが紙-FAB Iは、紙ダイアログオープンを行うことができますどのように任意のアイデアを持っていますタップされていますか？私はいくつかのインクルードが欠けていると思うが、私はどれがインクルードされているのか分からない。

Answer 1

最初はonclickを使用しないでください。オン・クリックやオン・タップのようなポリマー・イベント属性があります。

<paper-fab icon="add" on-tap="_openDialog"></paper-fab> 

と内部のスクリプトID]ダイアログで

_openDialog: function() { 
    this.$.dialog.open(); 
} 

this.$.dialog検索要素と機能open