在Dart中处理bootstrap4模态

时间:2018-09-12 12:54:34

标签: events dart bootstrap-modal dart-html dart2js

我需要从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)

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

1 个答案:

答案 0 :(得分:2)

您定义了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) {}));