简单的 Dart Web 组件不工作答案

【问题标题】：Simple Dart Web Component Not Working简单的 Dart Web 组件不工作
【发布时间】：2013-06-14 01:45:34
【问题描述】：

短版：第一个链接中的自定义 Web 组件示例对我不起作用。为什么不？我在 Dartium 中运行它。

加长版： 我将this Dart Web UI 示例从this tutorial 复制并粘贴到Dart 编辑器中并尝试运行它。页面上什么都没有显示。我以前使用过 dart，但没有使用 web 组件，所以我注意到这段代码与我编写的其他代码之间的一个区别是没有<script src="packages/browser/dart.js"></script>，所以我在底部添加了它。现在我得到了错误：

内部错误：Dart_Invoke：没有找到顶级函数“main”。

我在main()函数里放了一个print语句，在报错之前就打印了文字，很奇怪。我猜测并尝试在自定义组件中的<script> 标记内添加main() {}。也就是说，脚本标签看起来像：

<script type="application/dart">
  import 'package:web_ui/web_ui.dart';

  main() {print("in main in component");}
  class CounterComponent extends WebComponent {
    int count = 0;
    void increment() { count++; }
  }
</script>

现在错误消失了，两个打印语句都被打印了，但什么也没发生。

为方便起见，这里是原始教程代码：

<!DOCTYPE html>
<!--
Copyright (c) 2012, 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">
  <link rel="stylesheet"
    href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css">
</head>
<body>
  <element name="click-counter" constructor="CounterComponent" extends="div">
    <template>
      <button on-click="increment()">Click me</button>
      <span>(click count: {{count}})</span>
    </template>
    <script type="application/dart">
      import 'package:web_ui/web_ui.dart';

      class CounterComponent extends WebComponent {
        int count = 0;
        void increment() { count++; }
      }
    </script>
  </element>
  <div class="well">
    <div is="click-counter"></div>
  </div>
  <script type="application/dart">
    main(){}
  </script>
</body>
</html>

【问题讨论】：

标签： dart dart-webui dartium

【解决方案1】：

需要“构建”Web UI 应用程序（通常通过项目根目录中名为 build.dart 的脚本，see this article 了解更多详细信息）。

如果我进入 Dart 编辑器，使用向导创建一个新的测试项目并选择 Web 项目（使用 web_ui 库） 选项，这将创建包含构建脚本的样板。

打开 html 文件并粘贴来自 github 教程的代码，替换已有的代码。保存文件时，将调用build.dart，将构建版本输出到/web/out/

点击运行按钮，Dart Editor 将在 Dartium 中打开应用程序（它知道将/out/ 添加到 URL）。

【讨论】：