我对 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 异常。
我该如何处理这个问题?
最佳答案
听起来您想时不时地显示弹出表单。这就是我所做的。
我为对话框/弹出窗口指定此构造函数:
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();
关于dom - Dart WebUI 自动生成代码的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17927694/