将从javascript API返回的javascript对象转换为dart类

时间:2016-08-18 05:08:00

标签: dart dart-js-interop

我正在尝试使用https://pub.dartlang.org/packages/js中的js包创建auth0 javascript API的dart实现。

所以我在index.html中加载https://cdn.auth0.com/js/lock/10.0.0/lock.min.js并创建了以下auth0lock dart类:

@JS()
library auth0lock;

import 'package:js/js.dart';

@JS('Auth0Lock') 
class Auth0LockJS {
  external factory Auth0LockJS(String token, String domain, Object options);
  external on(String event, Function func);
  external show();
}

class Auth0Lock {
  Auth0LockJS auth0;
  Auth0Lock(String token, String domain, Object options) {
    this.auth0 = new Auth0LockJS(token,domain,options);
  }
  on(String event, Function func) {
    this.auth0.on(event,allowInterop(func));
  }
  show() {
    this.auth0.show();
  }
}

@anonymous
@JS()
class AuthResult {
 external factory AuthResult({
  String accessToken,
  String idToken,
  String idTokenPayload,
  String state
});
  external String get accessToken;
  external set accessToken(String v);
  external String get idToken;
  external set idToken(String v);
  external Object get idTokenPayload;
  external set idTokenPayload(Object v);
  external String get state;
  external set state(String v);
}

我正在编写angular2-dart应用程序,因此我使用以下代码创建了一个使用我之前显示的auth0lock.dart文件的身份验证服务:

@Injectable()
class Auth {
    Auth0Lock lock;

    authenticatedEvent(AuthResult authResult) {
      print(authResult);
    }

    Auth() {
        this.lock = new Auth0Lock(configObj.auth0.apiKey, configObj.auth0.domain,{});
        this.lock.on("authenticated", authenticatedEvent);
    }
    updateProfileName(data) {
      var profile = data['profile'] != null ? data['profile'] : data;
      print(profile['name']);
    }

    authenticated() {
      return false;
    }

    login() {
       this.lock.show();
    }
}

现在......一切确实有效!我在auth_service.dart文件中创建了一个名为AuthLock的变量类型lock。我的实例是带参数,运行show()函数,连接到authenticated事件,并且在验证完成后触发该函数。

我创建了一个类AuthResult,但它忽略了它,我从函数处理程序返回了一个javascript对象。

我使用Intellij编写代码并使用dartium执行。所以当我在print(authResult);文件的auth_service.dart行放置一个断点时,调试器会显示authResult对象包含2个属性JavaScript View,类型为Object,{{1类型为class的}。 JSObjectimpl包含此函数处理程序返回的所有属性。

如何将它转换为dart中的常规类?显然我创建了AuthResult类错误导致函数处理程序不返回此类型。我错过了什么?

谢谢!

更新

在我尝试打印Javascript View的{​​{1}}函数中,产生了JSObjectImpl类没有该函数的错误。所以返回对象是authenticatedEvent类型。奇怪的是,我不知道authResult.values在哪里定义,所以我删除了JSObjectImpl的变量类型,并尝试使用以下代码在目录中使用变量:

JSObjectImpl
这是有效的。为什么我在飞镖中找不到authResult类型?有什么快速的方法可以将它转换为飞镖类吗?

感谢

1 个答案:

答案 0 :(得分:3)

也许您只需要从@anonymous

中删除AuthResult

简化但完整且类似的例子

<强>的index.html

<!doctype html>
<html>
  <head>
    <script>
      var Apple = function(type) {
        this.type = type;
        this.color = "red";
        this.getInfo2 = function() {
          return this.color + ' ' + this.type + ' apple';
        };
      };

      Apple.prototype.getInfo = function() {
        return this.color + ' ' + this.type + ' apple';
      };

      function callback(f) {
        console.log(f);
        f(new Apple('Golden Delicious'));
      }
    </script>
  </head>
  <body>
    <script type="application/dart" src="index.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

<强> index.dart

@JS()
library typed_callback.web;

import 'package:js/js.dart';

@JS()
class Apple {
  external String get type;
  external set type(String type);
  external String get color;
  external set color(String color);
  external String getInfo();
  external String getInfo2();
  external Apple(String type);
}

typedef void Callback(Apple a);

@JS('callback')
external void callback(Callback /* or just Function */ f);

f(Apple apple) {
  print(apple.getInfo());
  print(apple); // prints the stringified JS object [object Object]
}

main() async {
  callback(allowInterop(f));
}