dart - 为什么此Web-UI代码不起作用?

标签 dart dart-webui

我使用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>

但这也不起作用。代码有问题吗?是过时了吗?我有没有要考虑的依赖性?

最佳答案

该代码对我来说很好。

您先运行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上阅读有关编译过程的更多信息。

关于dart - 为什么此Web-UI代码不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15850220/

相关文章:

dart - 我可以将 Dart Web UI 绑定(bind)添加到在代码中创建的 DOM 元素吗?

dart - 添加动态 WebComponent div

dart - RenderRepaintBoundary 到图像而不将小部件添加到屏幕

DART:配置设置的最佳实践是什么

android - 具有无限高度的Flutter ListView异常

android - 在Flutter中找不到参数的方法Implementation()

dart - 如何使web_ui自动编译CSS文件

dart - 通过链接标签从包导入组件的最佳方法是什么?

list - dart - 如果包含在列表中,如何检查 id/name?

sqlite - 如何从列表的 future 获取元素/值