11

如何将以下 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>

任何帮助表示赞赏。

4

2 回答 2

15

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

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

name:  jquerydart
description:  A sample application

dependencies:
  js: any

然后，通过命令行或 Dart 编辑器运行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 也使用$. 所以同时你需要jQuery在你的 Dart 代码中使用。

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

于 2012-11-05T05:44:46.923 回答
6

首先将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已被替换为：直接使用DART函数而不是与JSwindow.alert通信更有效。
于 2012-11-05T07:39:31.530 回答