扩展 PaperDialog 并通过 Dart 调用 toggle()

Question

我正在尝试扩展 PaperDialog 以便我可以设置它的样式。我正在尝试使用 this solution 中的方法 3，但使用的是 Dart 而不是 JS。这是我的组件。

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/paper_elements/paper_dialog.html">

<polymer-element name="hc-dialog" extends="paper-dialog" noscript>
  <template>
    <link href="hc-dialog.css" rel="stylesheet" type="text/css" />

    <shadow></shadow>
  </template>
</polymer-element>

该组件似乎正确呈现到 DOM - 我可以通过向组件添加 opened="true" 来验证它是否正常运行 - 这呈现得很好，例如：

<hc-dialog opened="true" closeSelector="[dismissive]" transition="paper-dialog-transition-bottom">
  <div layout horizontal>
    <span flex></span>
    <paper-button raised dismissive>Done</paper-button>
  </div>
</hc-dialog>

但我不希望它自动显示，当我试图找到一种通过 Dart 在此组件上调用 toggle() 的方法时，问题就来了。在上面链接的解决方案（working JS Fiddle）中，它是通过 JS 调用的：

<script>
  Polymer('x-dialog-3', {
    toggle: function() {
      this.$.dialog3.toggle();
    }
  });
</script>

但是，如果我尝试在 dart 中实现相同的目的，我将无法检索到具有 toggle() 方法的组件：

shadowRoot.querySelector('hc-dialog').toggle();

结果为 Object.noSuchMethod。通过反射检查返回的对象可以清楚地表明：

var he = shadowRoot.querySelector('hc-dialog');
var cm = reflect(he).type;

while (cm != null) {
   print(cm);
   cm = cm.superclass;
}

给出：

ClassMirror on 'HtmlElement' (:1)
ClassMirror on 'Element' (:1)
ClassMirror on 'Node' (:1)
ClassMirror on 'EventTarget' (:1)
ClassMirror on 'NativeFieldWrapperClass2' (:1)
ClassMirror on 'Object' (:1)

==> 我的对话框不是 PaperDialog/CoreOverlay，这就是为什么我不能在上面调用 toggle() 的原因。

这种方法有什么问题？我怎样才能获得可以调用 toggle() 的东西？

Answer 1

Polymer.dart 核心元素和纸质元素只是 Polymer.js 元素的包装。此类元素不支持扩展，因为 Dart class 无法扩展 JS class。

扩展 PaperDialog 并通过 Dart 调用 toggle()

Extending PaperDialog and calling toggle() via Dart

dart

dart-polymer