简单的Dart Web组件不工作 [英] Simple Dart Web Component Not Working
问题描述
简短版本：第一个链接中的自定义网络组件示例不适用于我。为什么不？
长版本：
我已复制并粘贴了 this Dart Web UI示例从本教程进入Dart编辑器并尝试运行它。网页上没有显示任何内容。我使用dart之前，但不是与web组件，所以我注意到，这个代码和其他代码之间的一个区别，我写的是没有< script src =packages / browser / dart .js>< / script> ，所以我在底部添加了。现在我得到的错误：
内部错误：Dart_Invoke：没有找到顶层函数'main'。
我在 main中放入一个函数，并且文本在错误之前打印，这是奇怪的。我猜想并尝试在自定义组件中的 print 语句）< script> 标记内添加 main（）{} 也就是说，脚本标签如下：
< script type =application / dart >
import'package：web_ui / web_ui.dart';
main（）{print（in main in component）;}
类CounterComponent extends WebComponent {
int count = 0;
void increment（）{count ++; }
}
< / script>
现在错误消失了，并且打印了两个print语句，但什么也没有发生。
为方便起见，这里是原来的教程代码：
<！DOCTYPE html>
<！ -
Dart项目作者2012年版权所有（c）。有关详细信息，请参阅AUTHORS文件
。版权所有。该源代码的使用由可以在LICENSE文件中找到的
BSD样式许可证管理。
- >
< html lang =en>
< head>
< meta charset =utf-8>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge，chrome = 1>
< link rel =stylesheet
href =// cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css\">
< / head>
< body>
< element name =click-counterconstructor =CounterComponentextends =div>
< template>
< button on-click =increment（）>点击我< / button>
< span>（点击数：{{count}}）< / span>
< / template>
< script type =application / dart>
import'package：web_ui / web_ui.dart';
类CounterComponent extends WebComponent {
int count = 0;
void increment（）{count ++; }
}
< / script>
< / element>
< div class =well>
< div is =click-counter>< / div>
< / div>
< script type =application / dart>
main（）{}
< / script>
< / body>
< / html> Web用户界面应用程序需要构建（通常是构建），而不需要创建通过项目根目录中的 build.dart 脚本
如果我去Dart编辑器，使用向导创建一个新的测试项目，选择 Web Project（使用web_ui库）选项，将创建包括构建脚本的样板。
打开html文件并粘贴在github教程的代码中，替换了已经存在的内容。保存文件时，将调用 build.dart ，将构建版本输出到/ web / out /
点击运行按钮，Dart Editor将在Dartium中打开应用程序（它知道要向URL中添加 / out / ）。
Short Version: The custom web component example in the first link isn't working for me. Why not? I'm running this in Dartium.
Long Version:
I copied and pasted this Dart Web UI example from this tutorial into the Dart Editor and tried to run it. Nothing showed up on the page. I've used dart before but not with web components, so I noticed that one difference between this code and other code I've written is that there was no <script src="packages/browser/dart.js"></script>, so I added that at the bottom. Now I got the error:
Internal error: Dart_Invoke: did not find top-level function 'main'.
I put a print statement in the main() function, and the text was printed before the error, which is strange. I guessed and tried adding main() {} inside the <script> tag that was in the custom component. That is, the script tag looked like:
<script type="application/dart">
import 'package:web_ui/web_ui.dart';
main() {print("in main in component");}
class CounterComponent extends WebComponent {
int count = 0;
void increment() { count++; }
}
</script>
Now that error goes away, and both print statements are printed, but nothing happens.
Here is the original tutorial code for your convenience:
<!DOCTYPE html>
<!--
Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file
for details. All rights reserved. Use of this source code is governed by a
BSD-style license that can be found in the LICENSE file.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css">
</head>
<body>
<element name="click-counter" constructor="CounterComponent" extends="div">
<template>
<button on-click="increment()">Click me</button>
<span>(click count: {{count}})</span>
</template>
<script type="application/dart">
import 'package:web_ui/web_ui.dart';
class CounterComponent extends WebComponent {
int count = 0;
void increment() { count++; }
}
</script>
</element>
<div class="well">
<div is="click-counter"></div>
</div>
<script type="application/dart">
main(){}
</script>
</body>
</html>
解决方案 Web UI applications need to be "built" (usually by a script called build.dart in the project root, see this article for more details).
If I go to the Dart Editor, create a new test project using the wizard and selecting the Web Project (using the web_ui library) option, this creates the boilerplate including the build script.
Open up the html file and paste in the code from the github tutorial, replacing what is there already. When you save the file, the build.dart will be invoked, outputting the build version to /web/out/
Hit the run button, and the Dart Editor will open the app in Dartium (it knows to add /out/ to the URL).
这篇关于简单的Dart Web组件不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
