Краткая версия. Пример пользовательского веб-компонента в первой ссылке у меня не работает. Почему нет? Я запускаю это в Dartium.
Длинная версия: я скопировал и вставил этот пример веб-интерфейса Dart из этого руководства в Dart Editor и попытался запустить его. На странице ничего не появилось. Я использовал dart раньше, но не с веб-компонентами, поэтому я заметил, что одно различие между этим кодом и другим кодом, который я написал, заключается в том, что не было <script src="packages/browser/dart.js"></script>, поэтому я добавил это внизу. Теперь я получил ошибку:
Internal error: Dart_Invoke: did not find top-level function 'main'.
Я поместил оператор print в функцию main(), и текст был напечатан перед ошибкой, что странно. Я догадался и попытался добавить main() {} внутри тега <script>, который был в пользовательском компоненте. То есть тег скрипта выглядел так:
<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>
Теперь эта ошибка исчезла, и оба оператора печати печатаются, но ничего не происходит.
Вот исходный код учебника для вашего удобства:
<!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>
