2

最新编辑：

这是 web-ui 中的一个未解决问题：https ://github.com/dart-lang/web-ui/issues/245

之前：

我试图弄清楚如何removed()从要调用的Web 组件生命周期方法中获取。查看下面示例的生成代码，我看到有一个调用，autogenerated.dispatch();之后replaceElement()我希望是什么调用removed()，但我没有看到我的打印语句输出。

也许相关：我浏览了规范，试图了解build.dart生命周期方法的输出。也许规范已经过时了？我仍然没有看到规范的实例化部分composeChildren()中列出（在这个 web-ui 问题评论中提到），即使在自动生成的代码中被调用。composeChildren()build.dart

这个问题背后的原因是我对能够以编程方式（通过规范中的实例化指令）在单个父 html 文件中加载和卸载 web 组件的 Dart webapp 感兴趣，而不必在 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>
4

1 回答 1

0

在此处添加一个完整的答案：Web 组件在 Dart 中使用 Polymer。当从 DOM 中删除自定义元素的实例时，将leftView触发生命周期方法。您可以在https://www.dartlang.org/docs/tutorials/polymer-intro/#life-cycle-methods阅读更多相关信息。

于 2013-12-27T18:51:54.503 回答