2

我是飞镖新手。

我试图在 Seth Ladd 的博客上构建web-ui 示例。我创建了一个新应用程序。

我的 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>

像这样的飞镖代码：

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}}它保持原样。

有任何想法吗？

4

1 回答 1

3

您需要按照 Seth Ladd 博客的设置部分中的说明编译您的 html。

如果您是 Dart Web Components 的新手，您可能想阅读我的 Your First Web Component with Dart 文章或Dart Web Components 文章。就像 Dart Web Components 一样，要使 MDV 工作，您需要获取包含 dwc 编译器的 web_components 包。编译器将 MVC 和 WC 代码转换为 vanilla Dart 和 HTML。

基本上你可以build.dart在你的根目录中添加一个类似的东西：

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

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

（请参阅Web UI 工具）

于 2012-12-11T20:30:58.460 回答