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

时间:2015-07-18 19:19:00

标签: javascript polymer polymer-1.0

我认为this post与Polymer 0.5相关,似乎不适用于Polymer 1.0。对于像我这样的初学者,我看不到明确的实施;只是实际的功能代码,而不是“如何”。这是我的简单设置不起作用(假设我已导入所有元素):

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

我希望我没有做错事。

1 个答案:

答案 0 :(得分:2)

替换:

this.$.dialog.toggle();

使用:

this.$.toggleDialog.toggle();

,因为:

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

最后:

id="toggleDialog"标记从<paper-button>标记移至<paper-dialog>标记。因为您希望使用<paper-dialog>方法定位.toggle()元素。不是<paper-button>本身。