2

我正在尝试我的第一个 Dart Web 应用程序，并试图了解一些示例代码的一部分在做什么。我下载了Dart-Eclipse 插件，然后创建了一个新的Dart Project。它创建了一个项目，其中包含一个示例 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!']);  
}

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

两个问题：

  1. HTML中的<script/>标签在做什么？它的src="myapp.dart属性直接引用了 Dart 源文件......我的印象是大多数浏览器不支持 Dart，所以它需要先交叉编译（通过dart2js或pub build）到 JavaScript？
  2. 如何将 HTML 与 Dart 文件连接起来？换句话说，我如何将它alertBtn与一个onclick处理程序连接起来，以便在用户单击它时运行 Dart 代码？
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 回答