Бумажный диалог Polymer не работает, его нельзя открыть

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: диалоговое окно не определено в HTMLElement.onclick (view3:1) onclick @ view3:1

Кто-нибудь имеет какие-либо идеи, как я могу сделать бумажный диалог, когда нажата бумажная фабрика? Я полагаю, что мне не хватает некоторых включений, но я не могу понять, какие именно.

Answer 1

Во -первых, не используйте onclick. Существуют атрибуты событий Polymer, такие как нажатие или нажатие. Во-вторых, вы должны вызвать функцию, которая откроет выбранный диалог

Пример:

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

и внутри сценария

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

this.$.dialog найти элемент с идентификатором и вызовом функции open