2

初めての Dart Web アプリを試していて、サンプル コードの一部が何をしているのかを理解しようとしています。Dart-Eclipse プラグインをダウンロードし、新しいDart Projectを作成しました。サンプルのダーツ、HTML、および CSS ファイルを含むプロジェクトを作成しました。次に、HTML ファイルを次のように変更しました。

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>My App</title>
        <link rel="stylesheet" href="myapp.css">
    </head>
    <body>
        <h2>Push the button!</h2>

        <div id="sample_container_id">
            <input type="button" id="alertBtn" value="Push Me!" />
        </div>

        <script type="application/dart" src="myapp.dart"></script>
    </body>
</html>

ユーザーが押すalertBtnと、次のコードを実行します。

import 'dart:js';

void main() {
    context.callMethod('alert', ['Hello from Dart!']);  
}

つまり、ユーザーがボタンを押すと、アラートボックスが画面にポップアップ表示されます。

2 つの質問:

  1. <script/>HTMLのタグは何をしているのですか? 属性は Dart ソース ファイルを直接参照しています...ほとんどのブラウザは Dart をサポートしていないので、(またはを介し​​て) 最初に JavaScriptsrc="myapp.dartにクロスコンパイルする必要があるという印象を受けました。dart2jspub build
  2. HTML を Dart ファイルに接続するにはどうすればよいですか? つまり、ユーザーがクリックしたときに Dart コードが実行されるようにalertBtn、ハンドラーを使用して を配線するにはどうすればよいでしょうか?onclick
4

1 に答える 1

1

1) このスクリプト タグは、Dart をサポートするブラウザー (現在は Dartium のみ) 用であり、他のブラウザーはそれを無視します。

2）ポリマー要素なしでは使用していませんが、HTMLを<template>タグ内に配置すると、次のような宣言バインディングを使用できます

<input type="button" id="alertBtn" value="Push Me!" on-click="{{showAlert}}"/>

dart-polymer-dart-examplesには、これを行う方法の例がいくつか含まれています。

使用することもできます

document.querySelector('#alertButton').onClick.listen(
    (e) => window.alert('Hello from Dart!'));
于 2013-12-22T15:44:01.493 に答える