2

最新の編集:

これは web-ui の未解決の問題です: https://github.com/dart-lang/web-ui/issues/245

以前：

Web コンポーネントremoved()のライフサイクル メソッドから呼び出される方法を見つけようとしています。以下の例で生成されたコードを見ると、 への呼び出しがあり、その後に が呼び出されることを期待していましたが、print ステートメントの出力が表示されません。autogenerated.dispatch();replaceElement()removed()

build.dartおそらく関連しています：ライフサイクルメソッドの出力が何をしているのかを理解しようとして、仕様をざっと見ました。もしかして仕様が古い？から自動生成されたコードで呼び出されますが、仕様のインスタンス化セクション(この web-ui issue コメントcomposeChildren()に記載されています) にリストされていません。composeChildren()build.dart

この質問の背後にある理由は、HTML で Web コンポーネントを宣言する代わりに、(仕様のインスタンス化手順を介して) プログラムで単一の親 html ファイル内の Web コンポーネントをロードおよびアンロードできる Dart 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 コンポーネントは、Polymer を使用する Dart で使用されます。カスタム要素のインスタンスが DOM から削除されると、leftViewライフサイクル メソッドがトリガーされます。詳細については、https://www.dartlang.org/docs/tutorials/polymer-intro/#life-cycle-methodsを参照してください。

于 2013-12-27T18:51:54.503 に答える