飞镖的JavaScript互操作的回调与jQuery(Dart JavaScript interop

如何翻译下面的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

然后，运行安装酒吧 ，无论是通过命令行或通过飞镖编辑器。

然后，在你的飞镖文件：

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回调到飞镖，你需要创建一个回调对象。

另外请注意，你不能使用$的jQuery的变量，dart2js也使用$ 。所以在此期间，你需要使用jQuery在DART代码。

说了这么多，它很酷，我们可以通过JS-飞镖使用jQuery的互操作，但应该达特真正做到这对我们来说。所以，我打开错误http://code.google.com/p/dart/issues/detail?id=6526

Answer 2:

首先添加js依赖于你的pubspec.yaml：

dependencies:
  js: any

通过使用JS-互操作可以编写几乎相同的代码在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通信。

文章来源: Dart JavaScript interop callbacks with jQuery