Question

我使用web-ui创建了一个新的Web应用程序。所有软件包似乎都已正确安装。我运行生成的“点击计数器”示例，但它没有出现。我转到了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/目录。右键单击click_counter.html目录中的out/文件，然后运行它。它应该工作。

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

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

1 个答案: