1

短いバージョン:最初のリンクのカスタム Web コンポーネントの例がうまくいきません。なぜだめですか？これを Dartium で実行しています。

長いバージョン:このチュートリアルからこのDart Web UI の例 をコピーして Dart エディターに貼り付け、実行しようとしました。ページに何も表示されませんでした。以前は dart を使用していましたが、Web コンポーネントでは使用していませんでした。そのため、このコードと私が書いた他のコードとの違いの 1 つは、 がないことであることに気付き、それを最後に追加しました。今、私はエラーを受け取りました：<script src="packages/browser/dart.js"></script>

内部エラー: Dart_Invoke: トップレベル関数 'main' が見つかりませんでした。

print関数にステートメントを入れたmain()ところ、エラーの前にテキストが出力されましたが、これは奇妙です。カスタムコンポーネントにあっmain() {}たタグの中に推測して追加してみました。<script>つまり、script タグは次のようになります。

<script type="application/dart">
  import 'package:web_ui/web_ui.dart';

  main() {print("in main in component");}
  class CounterComponent extends WebComponent {
    int count = 0;
    void increment() { count++; }
  }
</script>

そのエラーは解消され、両方の print ステートメントが出力されますが、何も起こりません。

便宜上、元のチュートリアル コードを次に示します。

<!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">
  <link rel="stylesheet"
    href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css">
</head>
<body>
  <element name="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="click-counter"></div>
  </div>
  <script type="application/dart">
    main(){}
  </script>
</body>
</html>
4

1 に答える 1

2

Web UI アプリケーションは「ビルド」する必要があります (通常build.dart、プロジェクト ルートで呼び出されるスクリプトによって、詳細についてはこの記事を参照してください)。

Dart エディターに移動し、ウィザードを使用して新しいテスト プロジェクトを作成し、Web プロジェクト (web_ui ライブラリを使用)オプションを選択すると、ビルド スクリプトを含むボイラープレートが作成されます。

html ファイルを開き、github チュートリアルのコードを貼り付けて、既存のものを置き換えます。ファイルを保存すると、build.dartが呼び出され、ビルド バージョンが /web/out/ に出力されます。

実行ボタンを押すと、Dart Editor が Dartium でアプリを開きます ( /out/URL に追加することを認識しています)。

于 2013-06-18T07:49:15.827 に答える