在 Dart 中动态添加一个 WebComponent？答案

【问题标题】：Dynamically add a WebComponent in Dart?在 Dart 中动态添加一个 WebComponent？
【发布时间】：2013-06-05 01:55:13
【问题描述】：

我试图按照此处找到的代码进行操作：

component_created_in_code_test.html

component_created_in_code.dart

但是，当我获取依赖项并在 dartium 中运行代码时，出现以下错误。调用 ComponentItem 的 create() 方法时出现此错误（在 .dart 代码中）：

Breaking on exception: Class 'SayHello' has no instance method 'created_autogenerated'.

我在下面稍微重写了它们（代码是相同的，除了 main 已被移动为 dart 代码而不是内联）：

<!-- component_created_in_code_test.html -->
<!doctype html>
<!--
Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
for details. All rights reserved. Use of this source code is governed by a
BSD-style license that can be found in the LICENSE file.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <script src="packages/web_ui/testing/testing.js"></script>
</head>
<body>
  <element name="say-hello">
    <template>Hello {{name}}!</template>
    <script type='application/dart' src="component_created_in_code.dart">
    </script>
  </element>
  <say-hello name="component create in html"></say-hello>
</body>
</html>

以及下面的飞镖代码，

//component_created_in_code.dart

library component_created_in_code;

import 'dart:async';
import 'dart:html';
import 'package:web_ui/web_ui.dart';

class SayHello extends WebComponent {
  String name;
}

void main() {
  Timer.run(() {
    var hello = new SayHello()
    ..host = new DivElement()
    ..name = 'component created in code';

    // "hello" is the DOM node.
    // "hello.xtag" is your SayHello object.
    // We are working on making these be the same object.

    // If the component uses data-binding, we need to make sure the
    // "lifecycle" methods get called. We are working to make this be
    // automatic too.
    var lifecycleCaller = new ComponentItem(hello)..create();
    document.body.nodes.add(hello.host);
    lifecycleCaller.insert();
    window.postMessage('done', '*');
  });
}

这个 dart-lang 示例似乎有问题。是我遗漏了什么还是代码很无聊？

在回答完这个问题后，我打包了这个问题的可行解决方案。

component_created_in_code

只需从 git 中拉取，然后导入 dartEditor。然后从编辑器中“发布安装”和“重新分析源代码”（永远不会受到伤害），然后右键单击“web/component_created_in_code.html”上的“在 Dartium 中运行”。

【问题讨论】：

Stephen，我在运行您的示例时遇到了以下错误。你也看到他们了吗？ "//@ sourceMapURL=" 源映射 URL 声明已弃用，应使用 "//# sourceMapURL=" 声明。 "//@ sourceMapURL=" 源映射 URL 声明已弃用，应使用 "//# sourceMapURL=" 声明。 FAIL 内部错误：'package:web_ui/web_ui.dart'：错误：第 137 行 pos 34：类 'WebComponent' 使用不兼容的参数覆盖超类 'Element' 的函数 'createInstance' DocumentFragment createInstance() => host.createInstance() ;
出于某种原因，即使在进行 pub 安装之后，我的包文件夹中也有旧库。多做几次就解决了，谢谢！

标签： dart dart-webui

【解决方案1】：

听起来您需要先运行 Web UI 编译器。要么在你的 HTML 文件上运行 packages/web_ui/dwc.dart，要么按照以下几行编写 build.dart：

import 'dart:io';
import 'package:web_ui/component_build.dart';

void main() {
  build(new Options().arguments, ['web/component_created_in_code_test.html']);
}

【讨论】：

这就是问题所在。谢谢。

【解决方案2】：

我使用 build 0.5.13_r23552 编辑器和 SDK 进行了相同的测试，并在 Dartium 中运行时遇到了同样的问题。但是，如果我执行 dart2js（作为 Javascript 运行/生成 javascript），它可以工作。

但是，请注意以下几点（根据我的经验）：

尝试更改为经过测试和验证的 SDK 版本。
似乎测试已更新为使用 0.5.15 运行；而 dartlang 网站上随编辑器一起提供的 SDK 仅为 0.5.13。也许克隆最前沿的版本以使其工作？
Dart 不断发展。如果您使用的是依赖项而不是特定的库版本，请务必在更新到最新的编辑器后对您的项目进行 pub update。
将 build.dart 添加到您的项目中，以确保在更改时生成代码（参见本页底部：Build.dart setup）

【讨论】：