1

在我的飞镖之旅中，我偶然发现了一个加载组件的“阻塞器”。

虽然我的组件定义如下：

<!DOCTYPE html>
<element name="x-foo" constructor="FooComponent" extends="button">
  <template>
    <button type="button" class="btn {{classes}}"> {{text}} </button>
   </template>

   <script type="application/dart">

   import 'package:web_ui/web_ui.dart';

   String classes = '';
   String text = '';

   class FooComponent extends WebComponent {

   }
   </script>
</element>

并引用组件如下：

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>example</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- '../web/foo.html' or '../web/out/foo.html.dart' -->
    <link rel="components" href='foo.html'>
  </head>
  <body>
    <h1>example</h1>

    <p>Hello world from Dart!</p>

    <x-foo></x-foo>

    <script type="application/dart">void main() { }</script>
    <script type="text/javascript" src="dart.js"></script>
  </body>
</html>

而且我的构建脚本没有创建 html 文件（输出文件夹：foo.html.dart），我不确定我必须参考哪个文件。

该手册的声明性也不足以解决我的问题： http ://www.dartlang.org/articles/dart-web-components/spec.html#loading-components

引用组件的定义 (foo.html) 或其生成的输出 (foo.html.dart) 都不起作用。我还通过检查仔细检查了这两个文件的路径，这两个文件都下载了铬。

我的结论性问题：这个参考（链接元素href）是指向内部智能还是指向运行时的“物理”可用文件？如果是第二个，哪个（生成的（html/dart）或来源）？

为了避免误解，我添加了我的回购清单：

foo
  packages
  examples
    assets
    dart.js
    example.html
  web
    out
      foo.html.dart
    foo.html
  build.dart
4

2 回答 2

2

组件文件 ( foo.html) 缺少<html><body>...</body></html>标记：

<!DOCTYPE html>
<html>
<body>
<element name="x-foo" constructor="FooComponent" extends="button">
...
</element>
</html>
</body>

两个文件 (examples.html和foo.html) 必须在同一个基目录中：

web
  examples.html
  foo.html
  ...

然后，examples.html需要用作内部参数build.dart：

build(new Options().arguments, ['web/example.html']);

最后，foo.html（即web/foo.html）必须是要链接的那个：

<link rel="components" href='foo.html'>
于 2012-12-19T22:10:12.840 回答
0

您在主 HTML 文件中使用它的方式是正确的。你引用foo.html是因为引用的 HTML 文档需要用 dwc 编译。dwc 将获取主 HTML 文件并编译它以及它包含的所有组件。该组件已完全编译为 Dart，它们的.html文件将不再使用。

如果您尝试编辑 example.html 以包含您的组件，则需要 compileexample.html而不是foo.html. 您仍然会生成 foo.html.dart，而且还会生成example.html.dart一个引导脚本来加载所有内容。

于 2012-12-19T22:00:39.950 回答