最新编辑:
这是web-ui中的未解决问题:https://github.com/dart-lang/web-ui/issues/245
先前:
我试图弄清楚如何从web component lifecycle methods中获取removed()
进行调用。在下面的示例中查看生成的代码,发现在autogenerated.dispatch();
之后有一个对replaceElement()
的调用,我希望这是所谓的removed()
,但是我看不到我的打印语句输出。
可能相关:我浏览了一下规范,试图了解build.dart
的输出对生命周期方法的作用。也许规格已经过时了?即使在composeChildren()
的自动生成的代码中调用了composeChildren()
,我仍然没有在规范的instantiation section(在this web-ui issue comment中提到)中看到build.dart
列出。
这个问题的原因是我对Dart Webapp感兴趣,该应用程序可以通过编程方式(通过规范中的实例化指令)在单个父html文件中加载和卸载Web组件,而不必在html中声明Web组件。我正在使用web_ui-0.2.11。谢谢!
网络组件:
<!DOCTYPE html>
<html><body>
<element name="x-lifecycle-test" constructor="LifecycleTest" extends="div">
<template> {{foo}} </template>
<script type="application/dart">
import 'dart:html';
import 'package:web_ui/web_ui.dart';
var foo = "testing lifecycle methods";
class LifecycleTest extends WebComponent{
inserted() => print("inserted");
removed() => print("removed");
}
</script>
</element>
</body></html>
父HTML文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><title>Lifecycle</title>
<link rel="components" href="lifecycle_test.html">
</head>
<body>
<div>
<button on-click="replaceElement()">replace element</button>
</div>
<div id='holder'>
<x-lifecycle-test></x-lifecycle-test>
</div>
<script type="application/dart">
import 'dart:html';
void replaceElement() {
query('#holder').replaceWith(new DivElement()
..id = 'holder'
..text = 'replaced');
}
main() {}
</script>
<script type='text/javascript' src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
</body>
</html>
最佳答案
在此处添加完整性的答案:Dart中使用Polymer来使用Web组件。从DOM中删除自定义元素的实例时,leftView
生命周期方法将触发。您可以在https://www.dartlang.org/docs/tutorials/polymer-intro/#life-cycle-methods上阅读有关此内容的更多信息。
关于dart - Dart Web组件何时需要删除已删除的生命周期方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14407745/