폴리머의 용지 대화 상자가

Question

나는 종이 공장이 아래 이미지에 탭 때 자신을 공개하는 종이 대화 상자를 구현하기 위해 노력하고 있습니다를 열 수 없습니다 작동하지 용지 대화 상자가 열리게하십시오.

나는 다음과 같은 내 애플 리케이션에 용지 대화 상자를 구현 한 :

<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

합니까 내가 용지 대화 상자 열기를 할 수있는 방법 어떤 생각을 가지고 사람 때 종이 공장 도청 됐어? 나는 몇몇 포함을 놓치고 있다고 생각 하나, 나는 어느 것을 알아 내지 못한다.

Answer 1

처음에는 onclick을 사용하지 마십시오. 온 클릭 또는 온탭과 같은 폴리머 이벤트 속성이 있습니다. 기능 open