为什么这个 Web-UI 代码不起作用？

Question

我使用 web-ui 创建了一个新的网络应用程序。所有软件包似乎都已正确安装。我运行了生成的“点击计数器”示例，但它没有出现。我去了Web-UI文章并粘贴了这段代码：

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

</head>
<body>
  <element name="x-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="x-click-counter" count="{{myNumber}}"></div>
    <div is="x-click-counter" count="{{5}}"></div>
  </div>
  <script type="application/dart">
    int myNumber = 12;
    main(){}
  </script>
</body>
</html>

但这也没有用。代码有问题吗？它已经过时了吗？是否有一些我没有考虑到的依赖项？

Answer 1

代码对我来说很好用。

您是先运行build.dart 吗？您不能直接运行此脚本并使其工作。您应该有一个看起来像这样的顶级build.dart 文件（我假设该文件位于web/ 目录中并称为click_counter.html）：

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

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

当您运行此文件时，将自动为您生成一个out/ 目录。右击out/目录下的click_counter.html文件，运行。它应该可以工作。

您可以在http://www.dartlang.org/articles/web-ui/tools.html 阅读有关编译过程的更多信息。