在 Dart 中处理 bootstrap4 模态

Question

我需要从 Dart 代码调用 bootstrap 模式，这是我尝试过的（使用 js 库）：

@JS('jQuery')
class jQuery {

  @JS()
  jQuery(obj);

  @JS('modal')
  external dynamic modal(func);
}

class Modal extends jQuery {

  Modal(obj) : super(obj);

  dynamic toggle() => super.modal('toggle');
  dynamic show() => super.modal('show');
  dynamic hide() => super.modal('hide');
  dynamic handleUpdate() => super.modal('handleUpdate');
  dynamic dispose() => super.modal('dispose');

}

在该代码中，如果我直接使用 jQuery class，我不会遇到任何问题（jQuery.modal('show')），但如果我使用 Modal 方法，即：

Modal modal = Modal('#myModal');
modal.toggle();

我会得到一个 TypeError: Cannot read property 'call' of undefined (NullError) .

javascript代码是jQuery('#myModal').modal(func)

我的第二个问题是如何挂钩自定义事件，例如：jQuery 中的 show.bs.modal 我会使用 .on(...) 但在 Dart 中我不知道，我使用 element.addEventListener('show.bs.modal', onModalShown) 但它没有被触发，我也没有收到任何错误。

Answer 1

你定义了 jquery class 但你需要从 window 中获取它，你还需要使用 @JS 注释定义你的模态，我不认为你可以扩展 jQuery class

我会那样做的

@JS('$')
external dynamic jQuery(query);

@JS()
@anonymous
class ModalElement {
  external modal(String call);
  external on(String event, Function callback);
  ...
}

final modal = jQuery('#myModal') as ModalElement;
modal.modal('toggle');

modal.on('event', allowInterop((event) {}));

在 Dart 中处理 bootstrap4 模态

Handling bootstrap4 modals in Dart

events

dart

bootstrap-modal

dart-html

dart2js