dart - 简单的Dart Web组件不起作用

标签 dart dart-webui dartium

简短版本:第一个链接中的自定义Web组件示例不适用于我。为什么不?我在Dartium中运行它。

完整版:
我将this Dart Web UI示例从this tutorial复制并粘贴到Dart编辑器中,并尝试运行它。页面上没有任何内容。我以前使用过dart,但没有使用过Web组件,因此我注意到此代码与我编写的其他代码之间的区别是没有<script src="packages/browser/dart.js"></script>,因此我在底部添加了它。现在我得到了错误:

Internal error: Dart_Invoke: did not find top-level function 'main'.

I put a print statement in the main() function, and the text was printed before the error, which is strange. I guessed and tried adding main() {} inside the <script> tag that was in the custom component. That is, the script tag looked like:

<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>

最佳答案

Web UI应用程序需要“构建”(通常由项目根目录中称为build.dart的脚本,see this article了解更多详细信息)。

如果我转到Dart编辑器,则使用向导创建一个新的测试项目,然后选择 Web项目(使用web_ui库)选项,这将创建包括构建脚本的样板。

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

点击运行按钮,Dart编辑器将在Dartium中打开该应用程序(它知道在URL中添加/out/)。

关于dart - 简单的Dart Web组件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17158809/

相关文章:

dart - Mockito - 在空安全迁移后 stub 一个方法

flutter - 如何确定一个偏移量是否包含在另一个偏移量区域中?

c++ - Release模式下的 Dartium 构建错误

dart - watcher.dart 和 observe.dart 有什么区别?

dart - 为什么 Dart 中允许不正确的类型分配?

dart - 在使用 Dartium 时,是否可以在网站上调用 Dart REPL?

firebase - 如何避免将分析传递到小部件树中?

html - 在 Polymer 中使用重复模板时,禁用数据绑定(bind)中的转义 HTML

Dart 正在应用程序目录中查找包(加载资源失败)

dart - Dart:如何实现和安装简单的HTTP服务器