在Dart中處理bootstrap4模態

Question

我需要從Dart代碼中調用引導程序模態，這是我嘗試過的方法（使用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類，我不會遇到任何問題（ 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) ，我使用了element.addEventListener('show.bs.modal', onModalShown) ，但未觸發，也沒有收到任何錯誤。

Answer 1

您定義了jquery類，但是您需要從窗口獲取它，還需要使用@JS注釋定義模態，我認為您不能擴展jQuery類

我會那樣做

@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) {}));