gpt4 book ai didi

dart - 在Dart M2中加载Web组件(web_ui)

转载 作者:行者123 更新时间:2023-12-03 03:29:38 24 4
gpt4 key购买 nike

在 Dart 之旅中,我偶然发现了加载组件的“障碍”。

在将我的组件定义如下时:

<!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)均无效。我还通过检查仔细检查了两个文件的路径,该检查刚刚下载了两个带有 Chrome 的文件。

我的结论是:
此引用(链接元素href)是在运行时指向内部智能还是“物理”可用文件?如果第二,是哪一个(生成的(html / dart)或源代码)?

为了避免造成误解,我添加了一份我的仓库 list :
foo
packages
examples
assets
dart.js
example.html
web
out
foo.html.dart
foo.html
build.dart

最佳答案

组件文件(foo.html)缺少<html><body>...</body></html>标签:

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

这两个文件( examples.htmlfoo.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'>

关于dart - 在Dart M2中加载Web组件(web_ui),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13960440/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com