2013-04-06 15 views
1

我用web-ui創建了一個新的web應用程序。所有軟件包似乎都已正確安裝。我運行了生成的「點擊計數器」示例,但沒有出現。我去了網絡用戶界面的文章,並粘貼此代碼:爲什麼這個Web UI代碼不工作?

<!DOCTYPE html> 
<!-- 
Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file 
for details. All rights reserved. Use of this source code is governed by a 
BSD-style license that can be found in the LICENSE file. 
--> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

</head> 
<body> 
    <element name="x-click-counter" constructor="CounterComponent" extends="div"> 
    <template> 
     <button on-click="increment()">Click me</button> 
     <span>(click count: {{count}})</span> 
    </template> 
    <script type="application/dart"> 
     import 'package:web_ui/web_ui.dart'; 

     class CounterComponent extends WebComponent { 
     int count = 0; 
     void increment() { count++; } 
     } 
    </script> 
    </element> 
    <div class="well"> 
    <div is="x-click-counter" count="{{myNumber}}"></div> 
    <div is="x-click-counter" count="{{5}}"></div> 
    </div> 
    <script type="application/dart"> 
    int myNumber = 12; 
    main(){} 
    </script> 
</body> 
</html> 

但是,這也沒有工作。代碼有問題嗎?它過時了嗎?有沒有依賴我沒有考慮?

回答

1

該代碼適合我。

您是先運行build.dart嗎?你不能直接運行這個腳本並讓它工作。你應該有一個頂層build.dart文件看起來是這樣的(我假設該文件住在web/目錄中,名爲click_counter.html):

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

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

當你運行這個文件,out/目錄將自動 - 爲您生成。右鍵單擊out/目錄中的click_counter.html文件,然後運行它。它應該工作。

您可以在http://www.dartlang.org/articles/web-ui/tools.html閱讀更多關於編譯過程。

+1

你說得對。我現在感覺很愚蠢。非常感謝!另一方面,運行過程現在是Dart Editor做的一件痛苦的事情。編輯web/app.html,保存它,運行build.dart,運行web/out/app.html。回到web/app.html進行編輯。我認爲這是值得一個腳本。 – 2013-04-06 14:46:04

+1

不要感到愚蠢,我們都犯了同樣的錯誤。而且你是完全正確的:構建過程可以簡化。 – 2013-04-06 16:04:06