Dart 中如何调用与特定元素相关联的 JS 函数？答案

【问题标题】：How do you call a JS function that is associated with a specific element in Dart?Dart 中如何调用与特定元素相关联的 JS 函数？
【发布时间】：2016-06-23 10:21:43
【问题描述】：

使用最新的packages:js，如何在Dart中调用与特定html元素/web组件相关联的JS函数？

示例：在称为 OnsenUI 的第三方框架中，我可以通过放置来创建警报对话框

<ons-alertdialog id='blah'>
  Test
</ons-alertdialog>

在 html 中。此外，我可以通过 document.querySelect('blah').show({options}); 访问 OnsenUI 提供的此警报对话框的方法。或者 javascript 中的 document.querySelect('blah').hide({options})。所以我的问题是我必须做什么才能访问 Dart 中的显示/隐藏方法？

这是他们的 javascript 代码： https://github.com/OnsenUI/OnsenUI/blob/master/core/src/elements/ons-alert-dialog/index.js

这是他们在 angular2 中使用 typescript 的指令： https://github.com/OnsenUI/OnsenUI/blob/master/bindings/angular2/src/directives/ons-alert-dialog.ts

我的最终目标是模仿他们在 angular2 中使用 typescript 但使用 angular2 dart 所做的事情。但是，我不确定如何使用 Dart 在下面实现，因为我不认为直接调用 this._onsAlertDialog.show() 会在不使用 dart:js 上下文的情况下工作。

/**
   * @method show
   * @signature show()
   * @return Promise<any>
   */
  show() {
    return this._onsAlertDialog.show();
  }

  /**
   * @method hide
   * @signature hide()
   * @return Promise<any>
   */
  hide() {
    return this._onsAlertDialog.hide();
  }

谢谢

【问题讨论】：

使用上下文有什么问题？我知道唯一可行的方法是利用上下文对象。

标签： dart dart-js-interop

【解决方案1】：

使用JS pacakage，您可以创建映射带有注释的 JavaScript API 的 Dart 类。例如：

@JS('google.maps')
library maps;

@JS()
class Map {
  external Map(Location location);
  external Location getLocation();
}

现在如果你写 Dart：

var l = getLocation();
var m = new Map(l);

它将等同于 JavaScript：

var l = google.maps.getLocation();
new google.maps.Map(l);

您需要通过它们的 API 创建这些类或使用上下文对象。

【讨论】：