jQuery的Dart JavaScript互操作回调

Question

如何将以下jquery代码转换为Dart？ 我很难使用js.interop使警报回调起作用。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
  $(function () {
    $('p').hide('slow', function() {
      alert("The paragraph is now hidden");
    });
  });
</script>

任何帮助表示赞赏。

Answer 1

感谢您的提问！ 我不确定自己，但事实证明这是可能的。 :)

首先，将js添加到您的pubspec.yaml中：

name:  jquerydart
description:  A sample application

dependencies:
  js: any

然后，通过命令行或Dart Editor运行pub install 。

然后，在您的Dart文件中：

import 'dart:html';
import 'package:js/js.dart' as js;

hideIsDone() {
  window.alert('all done!');
}

void main() {
  js.scoped(() {
    js.context.jQuery('p').hide(1000, new js.Callback.once(() => hideIsDone()));
  });
}

请注意，要从JS回调到Dart，您需要创建一个Callback对象。

还要注意，不能将$用作jQuery变量，因为dart2js也使用$ 。 因此，与此同时，您需要在Dart代码中使用jQuery 。

说了这么多，我们可以通过JS-Dart互操作使用jQuery很酷，但是Dart确实应该为我们做到这一点。 因此，我打开了错误http://code.google.com/p/dart/issues/detail?id=6526

Answer 2

首先将js依赖项添加到您的pubspec.yaml中 ：

dependencies:
  js: any

通过使用js-interop，您可以编写与javascript中几乎相同的代码。

import 'dart:html';
import 'package:js/js.dart' as js;

void main() {
  js.scoped(() {
    js.context.$(new js.Callback.once(($) {
      $('p').hide('slow', new js.Callback.once(() {
        js.context.alert("The paragraph is now hidden");
      }));
    }));
  });
}

主要区别在于：

• 您必须使用js.Callback.once或js.Callback.many来设置回调函数。 如果您的回调仅被调用一次，请使用js.Callback.once 。
• 您的代码必须用js.scoped包装。 基本上，在这里管理代理生存期是为了防止内存泄漏。

也就是说，您可以简化上面的代码：

import 'dart:html';
import 'package:js/js.dart' as js;

void main() {
  js.scoped(() {
    js.context.$('p').hide('slow', new js.Callback.once(() {
      window.alert("The paragraph is now hidden");
    }));
  });
}

更改为：

• js.context.$(new js.Callback.once(($) {因为main等效于jQuery $(function) 。
• js.context.alert已由window.alert代替：直接使用DART函数而不是与JS进行通信更有效。