Dart JavaScript interop обратные вызовы с помощью jQuery

Как я могу перевести следующий код jquery в Dart? Мне трудно получить обратный вызов alert для работы с помощью 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>

Любая помощь приветствуется.

Ответ 1

спасибо за ваш вопрос! Я не был уверен в себе, но оказывается, что это возможно.:)

Прежде всего, добавьте js к вашему pubspec.yaml:

name:  jquerydart
description:  A sample application

dependencies:
  js: any

Затем запустите pub install, либо через командную строку, либо через редактор Dart.

Затем в файле 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 вам необходимо создать объект обратного вызова.

Также обратите внимание, что вы не можете использовать $ для переменной jQuery, так как dart2js также использует $. Таким образом, в то же время вам нужно использовать jQuery в вашем коде Dart.

Сказав все это, здорово, что мы можем использовать jQuery через JS-Dart interop, но Dart должен действительно сделать это для нас. Поэтому я открыл ошибку http://code.google.com/p/dart/issues/detail?id=6526

Ответ 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.