Question

我正在尝试使用我的第一个Dart网络应用，并试图了解一些示例代码的一部分正在做什么。我下载了Dart-Eclipse plugin，然后创建了一个新的 Dart项目。它创建了一个带有示例dart，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!']);  
}

换句话说，用户按下按钮，屏幕上会弹出一个警告框。

两个问题：

HTML中的<script/>标记是做什么的？它的src="myapp.dart属性直接引用Dart源文件...我的印象是大多数浏览器不支持Dart，因此需要进行交叉编译（通过dart2js或{{1}首先是JavaScript？
如何将HTML与Dart文件相关联？换句话说，如何将pub build与alertBtn处理程序连接起来，以便在用户点击它时运行Dart代码？

Answer 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!'));

Dart：将HTML处理程序连接到Dart源代码

1 个答案: