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

次に、コマンドラインまたはDartEditorを介してpubinstallを実行します。

次に、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オブジェクトを作成する必要があることに注意してください。

$また、dart2jsもを使用するため、jQuery変数には使用できないことに注意してください$。その間jQuery、Dartコードで使用する必要があります。

そうは言っても、JS-Dart相互運用機能を介してjQueryを使用できるのはすばらしいことですが、Dartは実際にこれを実行する必要があります。だから私はバグhttp://code.google.com/p/dart/issues/detail?id=6526を開きました

于 2012-11-05T05:44:46.923 に答える
6

まず、 pubspec.yamljsに依存関係を追加します。

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コールバックが1回だけ呼び出される場合に使用します。
  • コードはでラップする必要があります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(($) {mainjQueryと同等であるため、必要ありません$(function)。
  • js.context.alertに置き換えられました： JSと通信する代わりに、DARTwindow.alert関数を直接使用する方が効率的です。
于 2012-11-05T07:39:31.530 に答える