Question

我是dart的新手。

我试图在Seth Ladd的博客上构建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>

这样的飞镖代码：

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

有什么想法吗？

Answer 1

您需要按照Seth Ladd博客的“设置”部分所述编译您的html。

如果您是Dart Web Components的新用户，可能需要使用Dart帖子或Your First Web Component阅读我的Dart Web Components article。就像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']);
}

（见Tools for Web UI）

web-ui 2路数据绑定

1 个答案: