我是 dart 新手。
我试图构建 web-ui example在塞思·拉德的博客上。我创建了一个新应用程序。
我的 html 看起来像这样:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Proefje</title>
<link rel="stylesheet" href="Proefje.css">
</head>
<body>
<h1>Hello MDV</h1>
<p>MDV is {{superlative}}</p>
<button id="change-it" on-click="changeIt()">Change</button>
<script type="application/dart" src="Proefje.dart"></script>
<script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
</body>
</html>
Dart 代码如下:
import 'dart:math';
import 'dart:html';
import 'package:web_ui/web_ui.dart'; // not sure about this line
String superlative;
List<String> alternatives = const ['wicked cool', 'sweet', 'fantastic'];
Random random;
main() {
superlative = 'awesome';
random = new Random();
query('#change-it').text = 'Do Change';
}
changeIt() => superlative = alternatives[random.nextInt(alternatives.length)];
还有我的 pubspec.yaml
name: Proefje
description: A sample application
dependencies:
web_ui: any
当我运行应用程序时，我看到查询函数更改了按钮中的文本，但 MDV is {{superlative}} 保持原样。
有什么想法吗？
最佳答案
您需要按照 Seth Ladd 博客的设置部分中所述编译 html。
If you're new to Dart Web Components, you might want to read my Your First Web Component with Dart post, or the Dart Web Components article. Just like Dart Web Components, for MDV to work you need to get the web_components package, which contains the dwc compiler. The compiler is what converts the MVC and WC code into vanilla Dart and HTML.
基本上，您可以在根目录中添加 build.dart ，内容如下:
import 'package:web_ui/component_build.dart';
import 'dart:io';
void main() {
build(new Options().arguments, ['web/App.html']);
}
(参见 Tools for Web UI )
关于dart - web-ui 2路数据绑定(bind)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13827771/