Простой Dart Web Component не работает

Короткая версия: пример пользовательского веб-компонента в первой ссылке не работает для меня. Почему бы и нет? Я управляю этим в Дартиуме.

Длинная версия: я скопировал и вставил этот пример веб-интерфейса Dart из этого руководства в редактор Dart и попытался запустить его. На странице ничего не появилось. Я использовал dart раньше, но не с веб-компонентами, поэтому я заметил, что одно отличие между этим кодом и другим кодом, который я написал, состоит в том, что <script src="packages/browser/dart.js"></script>так что я добавил это внизу. Теперь я получил ошибку:

Внутренняя ошибка: Dart_Invoke: не найдена функция верхнего уровня 'main'.

Я положил print заявление в main() функция, и текст был напечатан до ошибки, что странно. Я угадал и попытался добавить main() {} внутри <script> тег, который был в пользовательском компоненте. То есть тег 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>
Источник

1 ответ

Решение

Приложения веб-интерфейса должны быть "собраны" (обычно с помощью скрипта build.dart в корне проекта, см. эту статью для более подробной информации).

Если я зайду в Dart Editor, создам новый тестовый проект с помощью мастера и выбрав опцию Web Project (используя библиотеку web_ui), это создаст шаблон, включая скрипт сборки.

Откройте html-файл и вставьте код из учебника github, заменив то, что там уже есть. Когда вы сохраняете файл, build.dart будет вызван, выводя версию сборки в /web/out/

Нажмите кнопку "Выполнить", и редактор Dart откроет приложение в Dartium (оно знает, как добавить /out/ на URL).

Источник
Другие вопросы по тегам