是否可以从Dart定义有效的JavaScript函数?

时间:2014-02-26 17:15:24

标签: dart dart-js-interop

抱歉我的英语不好。 我是Dart语言的新手。我一直在寻找JS和Dart之间的沟通方式。我想从Dart调用jQueryUI代码。

当我创建一个jQueryUI的对话框时,HTML和JS代码将是这样的:

HTML code:

...
<button id="btn1">OPEN</button>
<div id="msg">
Hello, world!
</div>
...

JS代码:

$('#btn').click( function() {
  $('#msg').dialog('open');
});

$('#msg').dialog({
  autoOpen: false,
  buttons: {
    "OK": function() {
      $(this).dialog('close');
    }
  },
  title: "Dialog",
  modal: false,
  show: 'fold',
  hide: 'puff'
});

所以,我试图将这些JS代码转换为Dart代码。 但是,当我在下面写下这些测试Dart代码时,我收到了一条错误消息。

Breaking on exception: Closure call with mismatched arguments: function 'call'

Dart代码:

import 'dart:html';
import 'dart:js' as js;

void dartFunc() {
  print("test");
}

void main() {

  js.JsObject btn = js.context.callMethod(r'$', ['#btn']);
  btn.callMethod('click', [dartFunc]); //-----> ERROR!
  //...
}

但是,当我在下面编写JS函数和Dart代码时,错误消失了,程序运行成功。

JS代码:

function jsFunc() {
  console.log("test");
}

Dart代码:

import 'dart:html';
import 'dart:js' as js;

void dartFunc() {
  print("test");
}

void main() {

  js.JsObject btn = js.context.callMethod(r'$', ['#btn']);
  btn.callMethod('click', [jsFunc]); -----> SUCCESS!
  //...
}

为了找出这个问题,我进行了一些测试。 当我从Dart将两个函数(jsFunc()和dartFunc())打印到控制台时,如

Dart代码:

...
js.context['dartFunc'] = dartFunc;
print(js.context['jsFunc']);
print(js.context['dartFunc']);
...

结果如下。

function jsFunc() {
  console.log("test");
}
function () {
  return func(Array.prototype.slice.apply(arguments));
} 

显然print(js.context['dartFunc'])的结果很奇怪。

有人可以帮忙吗? 是否可以从Dart定义有效的JavaScript函数?

感谢您阅读到最后:)

1 个答案:

答案 0 :(得分:2)

允许使用与声明相同数量的参数调用Js函数。这在Dart中是不一样的。

基本上,您定义的回调(dartFunc)至少使用一个参数调用,但该函数不支持参数。您只需向Dart函数添加optionnal参数即可。因此错误应该消失。

void dartFunc([arg1,arg2,arg3]) {
  print("test");
}

现在可以使用0到3个参数调用该函数。