使用jQuery的Dart JS互操作库 [英] Dart JS interop for library using jQuery

问题描述

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

I am attempting to use Dart's package:js to create an interop library for JScrollPane, which is wrapped with jQuery.

这是我到目前为止的内容：

Here's what I have so far:

@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

推荐答案

元素是来自 dart：html 且未带有 @anonymous 注释，则应使用 dynamic <

Element is from dart:html and is not annoted with @anonymous, you should use the dynamic keyword instead.

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

更新

由于它是一个jQuery插件，所以我认为您不能直接访问JScrollPane，但我从未包装过jQuery插件，但是如果您使用该插件的示例代码：

Since it is a jQuery plugin, I don't think you can directly access to the JScrollPane, I have never wrap a jQuery plugin, but if you take the example code of the plugin:

$('.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互操作库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！