如何在Polymer 1.0中使用Paper-Dialog？

Question

I think this post relates to Polymer 0.5 and seems not to work in Polymer 1.0. For a beginner like me, I see no clear implementation; just the actual function code and not a "How to". Here is my simple setup that does not work (assume I have imported all elements):

<dom-element id="my-app">
 <template>
    <paper-button raised id="toggleDialog"></paper-button>
    <paper-dialog entry-animation="scale-up-animation"
      exit-animation="fade-out-animation" onclick="{{toggleDialog}}">
      <h2>Header</h2>
      <div>Dialog body</div>
    </paper-dialog> 
 </template>
 <script>
  Polymer({
   is: "my-app",
   properties: {
    type: String,
    observer: "" // not important for this example so it's empty.
   },
    // should I put the function here?
    toggleDialog: function() {
      this.$.dialog.toggle();
    }
  });
 </script>
</dom-element>

I hope I am not doing something wrong.

Answer 1

Replace:

this.$.dialog.toggle();

with:

this.$.toggleDialog.toggle();

because:

The string after the cash sign $ needs to match the id .

And, finally:

Move the id="toggleDialog" attribute from the <paper-button> tag to the <paper-dialog> tag. Because you want to target the <paper-dialog> element with the .toggle() method. Not the <paper-button> itself.