web-ui 2路數據綁定

我試圖在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}}保持不變。

任何想法？

來源

2012-12-11 JvdBerg

您需要編譯您的html，如Seth Ladd博客的設置部分所述。

如果你是新來飛鏢Web組件，您可能需要閱讀我的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）

來源

2012-12-11 20:30:58

感謝亞歷山大，我設法得到它在您的幫助，並從一些幫助工作web-ui小組。編輯和版本存在問題，但幾天後即可解決。 – JvdBerg

lol，剛剛登陸的新版本http://news.dartlang.org/2012/12/new-dart-editor-build-0282r15948.html –

我也剛剛推出了一個新的Web UI codelab：http：// news。 dartlang.org/2012/12/new-dart-web-ui-codelab.html –

web-ui 2路數據綁定

回答

相關問題