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(); 
}