Dart JS interop for library使用jQuery

Question

我正在尝试使用Dart的包：js为JScrollPane创建一个interop库，它使用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，并且不与annoted @anonymous，您应该改用dynamic关键字。

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

UPDATE

既然是一个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(); 
}