使用 jQuery 的库的 Dart JS 互操作

Question

我正在尝试使用 Dart 的 package:js 为 JScrollPane 创建一个互操作库，它用 jQuery 包装。

这是我目前的情况：

@JS()
library jscrollpane;

import 'dart:html';

import 'package:js/js.dart';

@JS()
@anonymous
abstract class JScrollPaneSettings {
    external factory JScrollPaneSettings({bool showArrows});

    external bool get showArrows;

    external set showArrows(bool value);

}

@JS()
class JScrollPane {
    external JScrollPane(Element element, JScrollPaneSettings settings);
}

这是错误：

Not a valid JS object

STACKTRACE:
#0      JsNative.callConstructor (dart:js:1461)
#1      JScrollPane.JScrollPane (package:portal/base/views/scrollbar/jscrollpane.dart_js_interop_patch.dart:13:30)

这是 JS 库 - http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.js

Answer 1

Element 来自 dart:html 并且没有用 @anonymous 注释，您应该使用 dynamic 关键字代替。

@JS()
class JScrollPane {
  external JScrollPane(dynamic element, JScrollPaneSettings settings);
}

更新

因为它是一个jQuery插件，我不认为你可以直接访问JScrollPane，我从来没有包装过一个jQuery插件，但是如果你拿示例代码插件：

$('.scroll-pane').jScrollPane();

您可以尝试包装 $ 函数

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

@JS()
@anonymous
class JScrollPaneElement {
  external jScrollPane();
}

void main() {
  JScrollPaneElement scrollPane = jQuery('.scroll-pane') as JScrollPaneElement;
  scrollPane.jScrollPane();
}

使用 jQuery 的库的 Dart JS 互操作

Dart JS interop for library using jQuery

dart

dart-js-interop