dart - 父级分离回调中的children.clear期间的附加回调

标签 dart web-component dart-html

简单场景:有 2 个 Web 组件,父级中的子级。
当将父级重新插入到其他地方时,分离 已调用父级的回调,并在其中调用 children.clear() (也许这里是愚蠢的地方)。
在清理 child 的过程中,我可以看到不仅 child 的分离 cb 调用了,但是 也:

https://dartpad.dartlang.org/26921310fb7f85dee672

import 'dart:html';

void main() {

  document.registerElement("x-my", MyElement);
  document.registerElement("x-ch", MyChild);
  var container = new Element.tag("x-my");
  document.body.children.add( container );
  print("creation done");

  // just re-add container to somewhere else
  var anothercontainer = new Element.div();
  document.body.children.add( anothercontainer );
  anothercontainer.children.add(container);

}

class MyElement extends HtmlElement {
  MyElement.created() : super.created();

  @override
  attached() {
    print("attached enter ${this.outerHtml}");
    super.attached();
    children.add( new Element.tag("x-ch") );
    print("attached leave ${this.outerHtml}");
  }

   @override
  detached() {
    print("detached enter ${this.outerHtml}");
    children.clear();
    super.detached();
    print("detached leave ${this.outerHtml}");
  }
}

class MyChild extends HtmlElement {
  MyChild.created() : super.created() { this.innerHtml = "child created"; }

  @override
  attached() {
    print("attached enter ${this.outerHtml}");
    super.attached();
    print("attached leave ${this.outerHtml}");
  }

   @override
  detached() {
    print("detached enter ${this.outerHtml}");
    super.detached();
    print("detached leave ${this.outerHtml}");
  }
}

给出输出:
attached enter <x-my></x-my>
attached enter <x-ch>child created</x-ch>
attached leave <x-ch>child created</x-ch>
attached leave <x-my><x-ch>child created</x-ch></x-my>
creation done
detached enter <x-my><x-ch>child created</x-ch></x-my>
detached enter <x-ch>child created</x-ch>
detached leave <x-ch>child created</x-ch>
attached enter <x-ch>child created</x-ch> <---- my question
attached leave <x-ch>child created</x-ch>
detached enter <x-ch>child created</x-ch>
detached leave <x-ch>child created</x-ch> <---- ends here
detached leave <x-my></x-my>
attached enter <x-my></x-my>
attached enter <x-ch>child created</x-ch>
attached leave <x-ch>child created</x-ch>
attached leave <x-my><x-ch>child created</x-ch></x-my>

最佳答案

关于这个 AFAIR 有一个 Unresolved 问题。我认为这是由于从自定义元素的构造函数中修改 DOM 造成的。

尝试移动

 this.innerHtml = "child created";

attached()

关于dart - 父级分离回调中的children.clear期间的附加回调,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35529196/

相关文章:

javascript - Dart 可以操作其他窗口中的 HTML 元素吗?

android - LoadAdError(代码 : 3, 域 : com. google.android.gms.ads,消息 : No ad config. .. 尝试在 Release模式下加载 BannerAd

css - 为什么我的 Web 组件 CSS 不显示?我没有使用 shadowDOM

dart - 如何在Dart中更改按钮的单击事件

dart - 在 dartlang 中实例化 Blob

javascript - 向下传递超过两个组件时数据会丢失

angularjs - 在页面初始化后评估 mustache 表达式(动态绑定(bind))

listview - 查询 ListView 中每一项的 SharedPreferences

dart - 从 Dart 中的其他 Web 组件访问状态

javascript - HTML 导入不起作用...即使它受支持