我一直在关注 Dart web-ui codelab。当我在 Web 组件中嵌入 dart 源代码时 .html
文件,我在 Dart 编辑器中没有获得任何静态分析或自动完成支持(此 http://code.google.com/p/dart/issues/detail?id=7449 存在一个 Unresolved 错误)。因此,我正在寻找使用 src 属性的临时解决方法。
根据规范,Dart 中的 Web 组件支持 src 属性:
https://www.dartlang.org/articles/dart-web-components/spec.html#behavior .我尝试链接到外部 Dart 库:给出 foo.html
网络组件
<element name="x-foo-component" constructor="FooComponent" extends="div">
我想链接到一个单独的
foo_embed.dart
与我的 Web 组件位于同一目录中的文件,它定义了 FooComponent
, 通过增加:<script type="application/dart" src="foo_embed.dart"></script>
在
foo.html
内.根据规范的建议,foo_embed.dart
需要是一个 Dart 库,并且包含:library foo_embed;
import 'package:web_ui/web_ui.dart';
class FooComponent extends WebComponent {
...
}
当我尝试这个时,运行
build.dart
(来自这些说明 http://www.dartlang.org/articles/dart-web-components/tools.html )最终只放置 foo_embed.dart
在 out/
并且没有 out/foo.html.dart
为导入而生成 application.dart
.正如所料,粘贴
foo_embed.dart
的内容作为 foo.html
中的内联脚本直接(在代码实验室中完成)与 build.dart
一起使用,并且我可以在 Dartium 中启动我的 webapp,所以我的项目中似乎没有任何其他语法问题。我可能在某处有一个简单的语法错误吗?或者这是 Dart Web 组件编译器的临时限制?谢谢。
最佳答案
我无法重现您的问题。
这对我有用:
lib/foo.dart
library foo;
import 'package:web_ui/web_ui.dart';
class FooComponent extends WebComponent {
var foo = 'asddfg';
}
lib/foo.html
<element name="x-foo" constructor="FooComponent" extends="div">
<template>
<input value="{{ foo }}" />
</template>
<script type="application/dart" src="foo.dart"></script>
</element>
示例/test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="components" href="packages/foo/foo.html" />
</head>
<body>
<x-foo></x-foo>
<script type="application/dart">main() {}</script>
<script type="text/javascript" src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
</body>
</html>
然后我打开 Dartium 并转到
.../example/out/test.html
我看到一个数据正确绑定(bind)到它的输入。
关于dart - 如何链接到包含 Web 组件构造函数的外部 Dart 库?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13922062/