Ответ 1
Вам необходимо импортировать все ваши классы Dart для компонента в my_app.dart. Как правило, вы должны создать один файл Dart для импорта, который будет экспортировать каждую запись, чтобы ваш my_app.dart оставался чистым.
Импорт HTML: CustomTag не зарегистрирован
Я пытаюсь создать пользовательский элемент из polymer-element, но я не могу сделать работу @CustomTag. Мой dart файл (my_element.dart) выглядит следующим образом:
@HtmlImport('my_element.html')
library projects.projectFolder.layout;
import 'package:polymer/polymer.dart';
import 'dart:html';
@CustomTag('my-element')
class MyElement extends PolymerElement {
@published String caption;
MyElement.created() : super.created();
}
Мой html файл (my_element.html) выглядит следующим образом:
<link rel="import" href="../../../../packages/polymer/polymer.html">
<polymer-element name="my-element">
<template>
<link rel="stylesheet" href="my_element.css">
<core-toolbar>
<h1>{{ caption }}</h1>
</core-toolbar>
</template>
<script type="application/dart" src="../my_element.dart"></script>
</polymer-element>
Дело в том, что консоль Chrome продолжает печатать следующую ошибку:
No elements registered in a while, but still waiting on 1 elements to be registered. Check that you have a class with an @CustomTag annotation for each of the following tags: 'my-element'.
Любопытно, потому что я объявил пользовательский тег так, как должен. Похоже, что он не читал файл .dart, когда он достигает .html.
Файл .html вызывается из другого родительского файла .html. Я думаю, что проблема, с которой вызываются файлы, может быть проблемой, но опять же, если Dart скомпилирован перед запуском, это не должно волноваться.
Я попробовал несколько решений, но никто из них не работал. Единственный, который работал, довольно грязный, который импортирует файл my_element.dart прямо из основного файла my_app.dart. Я думаю, это не должно быть сделано так, потому что это означало бы импортировать каждый отдельный файл my_element.dart в тот же основной my_app.dart.
EDIT (добавить index.html, pubspec.yml)
Мой файл index.html выглядит следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>My app</title>
</head>
<body unresolved fullbleed>
<my-app></my-app>
<script type="application/dart">
import 'package:polymer/polymer.dart';
import 'package:project/my_app.dart';
main() => initPolymer();
</script>
</body>
</html>
my_app - это еще один пользовательский элемент, который является основным элементом, в котором все остальные. Другими словами, это похоже на основной контроллер для приложения. Этот элемент также имеет файл .dart и .html, который вызывает другие элементы, такие как my-element.
Как вы можете видеть, моя функция main() очень проста, так как она только init Polymer (см. index.html).
Мой pubspec.yml выглядит следующим образом:
name: project
version: 0.0.1
description: Some project.
author: Tomas
homepage: https://github.com/*******
environment:
sdk: '>=1.10.0 <2.0.0'
dependencies:
polymer: '^0.16.0'
core_elements: '^0.7.1'
paper_elements: '^0.7.1'
route_hierarchical: "^0.6.1"
transformers:
- polymer:
entry_points: web/index.html
- $dart2js:
$include: "**/*.polymer.bootstrap.dart"
Мой каталог выглядит следующим образом (я просто показываю его часть, на что я надеюсь):
.
├── README.md
├── build
│ └── web
│ ├── index.html
│ ├── index.html.polymer.bootstrap.dart.js
│ └── packages
├── lib
│ ├── my_app.dart
│ └── src
│ ├── elements
│ ├── layout
│ │ ├── my_element.css
│ │ ├── my_element.dart
│ │ └── my_element.html
│ ├── my_app.css
│ ├── my_app.html
│ └── modules
│ └── module.dart
│ ├── my_app.css
├── pubspec.lock
├── pubspec.yaml
└── web
│ ├── index.html
│ └── packages -> ../packages
│ ├── my_app.html
│ └── modules
│ └── module.dart
Я надеюсь, что это редактирование не смущает больше, чем нужно. Я просто хочу знать, какая правильная структура папок и форма импорта формы Dart.
Вкратце: как дерево должно выглядеть при программировании большого приложения в дротике, и где я должен делать импорт? Я смотрю на каждую документацию, в которой я мог, включая некоторые учебные пособия, но все они говорят о очень простых примерах, где большая часть кода находится в папке web, чего я бы не хотел.
EDIT (суммировать и перефразировать, добавить my_app.html и my_app.dart)
Менее слов:
У меня есть пользовательский элемент, определяемый my_element.html и my_element.dart (определен выше в этом ответе), и я хочу импортировать его в другой элемент my_app, используя только html. То есть не импортируя my_element.dart в my_app.dart, а только импортируя my_element.html, используя тег ссылки в my_app.html:
<link rel="import" href="../../../packages/polymer/polymer.html">
<link rel="import" href="layout/my_element.html">
<polymer-element name="my-app">
<template>
<core-scaffold id="scaffold">
<my-element tool flex></my-element>
<main fit></main>
</core-scaffold>
</template>
<script type="application/dart" src="../my_app.dart"></script>
</polymer-element>
my_app.dart:
@HtmlImport('src/my_app.html')
import 'package:polymer/polymer.dart';
import 'package:core_elements/core_scaffold.dart';
@CustomTag('my-app')
class MyApp extends PolymerElement {
MyApp.created() : super.created();
}
Должно ли <script type="application/dart" src="../my_element.dart"></script> быть достаточно, чтобы сообщить компилятору загрузить этот файл дротика для регистрации тега элемента, выполнив переходную зависимость, определяемую импортом html?