飞镖JS库,如何通过回调函数(Dart JS Library, how to pass callba

2019-09-28 03:19发布

我们正在尝试用飞镖包装与包裹D3(V4)线发生器类https://pub.dartlang.org/packages/js 。 我们跟着https://github.com/google/chartjs.dart/但具有通过功能的问题。

我们的包装看起来是这样的:

@JS('d3')
library d3;

import 'dart:js';
import "package:js/js.dart";


@JS('line')
class Line {
  external Line();
  external String call (List<List<num>> data);
  external Line x(Function func);
  external Line y(Function func);
}

目前,我们已经成功地得到它的工作使用:

Line line = new Line();
String path = line([[10, 20], [200, 250]]);

但是我们想设置一个函数访问x和y的值。 我们已经尝试使用:

Line line = new Line();
line.x(allowInterop((d) { return d[0]+10;}));
line([[10, 20], [200, 250]]);

这会产生一个堆栈跟踪:

JSFunction._apply (dart:js:1300)
#1      JSFunction.call (dart:js:1290)
#2      CardinalLine.path (package:dials/app_component.dart:42:16)
#3      _View_AppComponent2.detectChangesInternal (package:dials/app_component.template.dart:189:49)
#4      AppView.detectChanges (package:angular2/src/core/linker/view.dart:247:10)
#5      DebugAppView.detectChanges (package:angular2/src/core/linker/view.dart:367:26)
#6      AppView.detectContentChildrenChanges (package:angular2/src/core/linker/view.dart:264:31)
#7      _View_AppComponent0.detectChangesInternal (package:dials/app_component.template.dart:118:10)
#8      AppView.detectChanges (package:angular2/src/core/linker/view.dart:247:10)
#9      DebugAppView.detectChanges (package:angular2/src/core/linker/view.dart:367:26)
#10     AppView.detectViewChildrenChanges (package:angular2/src/core/linker/view.dart:270:28)
#11     AppView.detectChangesInternal (package:angular2/src/core/linker/view.dart:259:10)
#12     AppView.detectChanges (package:angular2/src/core/linker/view.dart:247:10)
#13     DebugAppView.detectChanges (package:angular2/src/core/linker/view.dart:367:26)
#14     ViewRef_.detectChanges (package:angular2/src/core/linker/view_ref.dart:123:16)
#15     ApplicationRef_.tick.<anonymous closure> (package:angular2/src/core/application_ref.dart:443:63)
#16     List.forEach (dart:core-patch/growable_array.dart:254)
#17     ApplicationRef_.tick (package:angular2/src/core/application_ref.dart:443:32)
#18     ApplicationRef_._loadComponent (package:angular2/src/core/application_ref.dart:414:10)
#19     ApplicationRef_.bootstrap.<anonymous closure> (package:angular2/src/core/application_ref.dart:401:12)
#20     ApplicationRef_.run.<anonymous closure> (package:angular2/src/core/application_ref.dart:366:26)

这似乎当它试图将参数传递给事发生:

ORIGINAL EXCEPTION: V8 Exception(anonymous function) @ VM3533:1
VM3533:1 ORIGINAL STACKTRACE:(anonymous function) @ VM3533:1

其中VM3533是:

(function() {
    var func = this;
    return function() {
        return func(Array.prototype.slice.apply(arguments));
    }
    ;
}
)

传递的参数是:

[[MutationRecord], MutationObserver]

凡突变记录包括:

0: MutationRecord
addedNodes: NodeList[0]
attributeName: "hidden"
attributeNamespace: null
nextSibling: null
oldValue: null
previousSibling: null
removedNodes: NodeList[0]
target: div
type: "attributes"
__proto__: MutationRecord
length: 1
__proto__: Array[0]

我们试过很多的变化,其中包括继chartjs例子,但他们最终都以相同的堆栈跟踪。 什么是这样做的正确方法?

Answer 1:

因此,原来的功能正在正确地安装和调用,问题我已经定义的X方法只有一个变量d被称为事实所在。

这是最D3存取函数是如何在JavaScript中定义的,你只关心数据片目前正在修改。 然而D3总是通过三个变量,数据片d,索引i的,并且整个数据集的数据 。 JavaScript不关心的功能并不需要额外的参数,它只是用一个参数调用它。 然而飞镖护理,而且会抛出一个不稳定的功能不能用于因争论过载。 这是例外VM3533发生。

抛出的异常是烦人模糊的,很难看到没有调试JavaScript的。

所以,正确的解决方案是确保当您定义将从JavaScript调用的,它有它将会在这方面被称为参数的精确量的功能。

在这种情况下:

Line line = new Line();
line.x(
    allowInterop(
        (List<num> d, num i, List<List<num>> data) {
            return d[0]+10;
        }
    )
);
return line([[10, 20], [30, 40]]);


文章来源: Dart JS Library, how to pass callback functions