首页 文章

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

提问于
浏览 次
1

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

换句话说，用户按下按钮，并在屏幕上弹出警告框 .

两个问题：

  • HTML中的 <script/> 标签是什么？它的 src="myapp.dart 属性直接引用Dart源文件...我的印象是大多数浏览器不支持Dart，所以需要首先将它交叉编译（通过 dart2js 或 pub build ）到JavaScript？

  • 如何将HTML与Dart文件连接？换句话说，如何使用 onclick 处理程序连接 alertBtn ，以便在用户单击时运行Dart代码？

dart dart-html

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!'));
    回复于

相关问题