Dart 组件不起作用 - 为什么我的设置错误？答案

【问题标题】：Dart components not working - why is my set up wrong?Dart 组件不起作用 - 为什么我的设置错误？
【发布时间】：2013-03-06 05:51:06
【问题描述】：

所以我让一些 Dart 项目正常工作。但是当我尝试使用 web-ui 时，没有任何效果。我导入了我想的，有什么问题？

这里是代码（它是从 git 中获取的示例）。

project.html：

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Shout This!</title>
    <link rel="stylesheet" href="project.css">
  </head>
  <body>
    <h1>Shout This!</h1>

      <input type="text" bind-value="shoutThis" placeholder="Shout This!">

      <div>      Length: {{ shoutThis.length }} </div>
      <div>     Shouted: {{ shoutThis.toUpperCase() }} </div>
      <div>   Substring: {{ (shoutThis.length >= 6) ?
                         shoutThis.substring(1, 5) :
                         shoutThis.substring(0, 0) }} </div>
      <div> Palindromic: {{ palindrome() }} </div>

    <script type="application/dart" src="project.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
  </html>

项目.dart：

  import 'dart:html';
  import 'package:web_ui/web_ui.dart';
  import 'package:web_ui/watcher.dart' as watchers;


  String shoutThis='';

  void main() {
    window.alert('test');
  }

  String palindrome() {
    var buffer = new StringBuffer(shoutThis);
    for (int i = shoutThis.length - 1; i >= 0; i--) {
      buffer.write(shoutThis[i]);
    }
    return buffer.toString();
  }

当我启动项目时，我的测试消息出现了，但是 web ui 不起作用，我得到了这个：{{ sayThis.length }} 以文本形式显示。

【问题讨论】：

你建造了吗？这些东西在浏览器中仍然是找不到的，所以你需要构建或使用扩展：dartlang.org/articles/web-ui/tools.html

标签： dart dart-webui dart-editor

【解决方案1】：

单击（运行）“out”目录中的 html 文件，而不是您正在编辑的源文件。请记住，您当时已选择构建/启动文件。

确保您也事先创建了 build.dart 文件。

【讨论】：