Dart WebUI自动生成代码的问题

Question

我对web组件的自动生成代码有问题。这是一段HTML：

<div id="hidden-ui">
  <div id="auth-form" class="...">
    ...
    <to-button></to-button>
  </div>
  ...
</div>

如您所见，有一个名为to-button的自定义web组件：

<element name="to-button" constructor="TOSimpleButton" extends="div">
  ...
</element>

在启动时，我希望将#auth-form从父节点移到文档根目录：

Element af = document.query('#auth-form');
Element db = document.query('BODY');
db.children.add(af);

如果在可移动节点内部没有自定义的web组件，这是可以的，但当to-button在内部时，我会得到运行时RangeError。

下面是一段自动生成的代码：

 __e1 = __root.nodes[9].nodes[1].nodes[7];
 __t.component(new TOSimpleButton()..host = __e1);

正如您所看到的，组件有严格的旧路径，因此引发了RangeError异常。

我该如何处理这件事？

Answer 1

听起来你想时不时地显示弹出表单。这是我要做的。

我为对话框/弹出窗口指定了这个构造函数：

var lifecycleCaller;

DialogFooComponent() {
  host = new Element.html('<x-dialog-foo></x-dialog-foo>');

  lifecycleCaller = new ComponentItem(this)
    ..create();

  document.body.children.add(host);
  lifecycleCaller.insert();
}

如您所见，我将其添加到文档正文中。但是，只有在创建新实例时才会发生这种情况。

每当我需要显示弹出窗口时，我都会有这样的代码：

import '../dialog/foo/foo.dart';

...

// Later at some point I do:
new DialogFooComponent();

发生的情况是，当您希望弹出表单出现在正文中时，它们就会出现。

当你想要关闭对话框时，你可以在对话框组件内部调用它：

lifecycleCaller.remove();

Answer 2

正如前面提到的here，这不会在WebUI包中修复，但会在聚合物中修复。

这个问题不会在web_ui pkg中修复。它应该可以在聚合物pkg.

中工作。