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

Question

我认为 this post 与 Polymer 0.5 有关，似乎不适用于 Polymer 1.0。对于像我这样的初学者，我看不到明确的实现；只是实际的功能代码，而不是 "How to"。这是我的简单设置不起作用（假设我已经导入了所有元素）：

<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>

希望我没有做错什么。

Answer 1

替换：

this.$.dialog.toggle();

与：

this.$.toggleDialog.toggle();

因为：

现金符号 $ 后的字符串需要匹配 id.

最后：

将 id="toggleDialog" 属性从 <paper-button> 标签移动到 <paper-dialog> 标签。因为您想使用 .toggle() 方法定位 <paper-dialog> 元素。不是 <paper-button> 本身。

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

How to use Paper-Dialog in Polymer 1.0?

javascript

polymer

polymer-1.0