Question

这是我的index.html：

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <title>My App</title>

    <link rel="stylesheet" href="./styles.css" shim-shadowdom>

    <link rel="import" href="packages/myapp_frontend/elements/my_app/my_app.html">
    <link rel="stylesheet" href="packages/myapp_frontend/fonts/fonts.css">

    <script src="cordova.js" type="application/javascript"></script>
  </head>

  <body unresolved fullbleed>
    <my-app></my-app>

    <script src="socket.io.js" type="application/javascript"></script>
    <script src="main.dart" type="application/dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

内部my_app.html列出了整个应用的所有元素。这可以。一些元素是插件包装器，例如包裹<cordova-app-version on-app-version="{{ onVersionInfo }}"></cordova-app-version>的{{1}}。这个元素如下所示：

cordova_app_version_plugin

当它被添加到DOM时，@CustomTag('cordova-app-version') class CordovaAppVersion extends PolymerElement { CordovaAppVersion.created() : super.created() { document.on['deviceready'].listen((var e) { this.fire('app-version', detail: context['cordova']['plugins']['version'].callMethod('getAppVersion')); }); } }已被触发，因此devcieready事件会立即触发。同时，app-version函数尚未运行，并且（显然）没有任何事件侦听器（包括上面的MyApp.created()）已经注册。 "{{ onVersionInfo }}"事件触发，没有人听到它。几毫秒后，我收到app-version已运行的消息。如果我现在手动触发MyApp.created()事件，则会正确处理。

我不想手动更改所有插件文件以使用Timer（setTimeout equiv）来确保它们在MyApp构造函数之后触发，但我不知道还能做什么。如何在app-version事件触发所有子元素发送事件之前确保我的事件监听器注册？

Answer 1

访问DOM的代码不应该在Polymer元素的构造函数中运行。构造函数只应用于初始化本地字段。

如果您将代码移动到attached()或ready()等生命周期回调，它将按预期工作。

另见https://github.com/dart-lang/polymer-dart/wiki/registration-and-lifecycle#lifecycle-callbacks

Dart / Polymer：在我的app的构造函数运行之前，在事件侦听器注册之前触发的事件

1 个答案: