Dart WebUI 自动生成代码的问题答案

【问题标题】：Issue with Dart WebUI autogenerated codeDart WebUI 自动生成代码的问题
【发布时间】：2013-07-29 11:00:47
【问题描述】：

我对 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 异常。

我该如何处理？

【问题讨论】：

为什么需要移动身份验证表单？为什么一开始就不能把它放在合适的 DOM 位置呢？
@PixelElephant，这个想法是隐藏包含所有 UI 元素（正式弹出表单）的 DIV，这可能有用或没有用，因此当我需要显示身份验证表单时，我将其移动到文档根目录，当我需要隐藏它时——只需将其移回隐藏的 div 中。我同意，我可以使用另一种方法，而且我已经使用了另一种方法，但我认为这是一个合理的问题，不是吗？
好的，我只是在您的特定情况下没有看到需要，但我同意这在其他情况下可能是一个问题。

标签： dom dart dart-webui

【解决方案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();

【讨论】：

这种方法如何使用html模板？
你这是什么意思？您不会在 HTML 中插入对话框/弹出窗口，而是在用户单击某些内容时调用 new DialogFooComponent()，等等。
我明白了，我已经提到了 HTML 模板文件，其中组件描述为可选样式的 HTML 结构。就像 WebUI 组件一样（Dart + HTML）。

【解决方案2】：

如here 所述，这不会在 WebUI 包中修复，但会在 Polymer 中修复。

这不会在 web_ui pkg 中修复。它应该在聚合物 pkg 中工作。

【讨论】：