Próbuję utworzyć niestandardowy element z polymer-element, ale nie mogę wykonać pracy @CustomTag. Moja dart plik (my_element.dart) wygląda następująco:Import HTML: CustomTag niezarejestrowany
@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();
}
mój plik html (my_element.html) wygląda następująco:
<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>
Chodzi o to, że konsola Chrome utrzymuje się na drukowaniu następujący błąd:
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'.
To ciekawe, ponieważ zadeklarowałem niestandardowy tag tak, jak powinien. Wygląda na to, że nie odczytał pliku .dart po osiągnięciu .html.
Plik .html jest wywoływany z innego pliku nadrzędnego .html. Myślę, że kolejność, w której pliki są wywoływane, może stanowić problem, ale z drugiej strony, jeśli Dart zostanie skompilowany przed uruchomieniem, nie powinno to obchodzić.
Próbowałem różnych rozwiązań, ale żaden z nich nie zadziałał. Jedynym, który działał, jest bardzo brudny, który importuje plik my_element.dart prosto z głównego pliku my_app.dart. Myślę, że nie powinno się tego robić w ten sposób, ponieważ oznaczałoby to zaimportowanie każdego pojedynczego pliku my_element.dart w tym samym głównym pliku my_app.dart.
EDIT (dodaj index.html, pubspec.yml)
Mój plik index.html wygląda jak następuje:
<!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 to kolejny element niestandardowy, który jest głównym elementem, gdzie wszyscy inni idą. Innymi słowy, jest to główny kontroler aplikacji. Ten element ma również plik .dart i .html, który wywoła inne elementy, takie jak my-element.
Jak widać, moja funkcja main() jest bardzo prosta, ponieważ inicjuje tylko polimer (patrz index.html).
My pubspec.yml wygląda jak następuje:
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"
Mój katalog wygląda tak (ja po prostu pokazać ułamek tego, ważne jeden mam nadzieję):
.
├── 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
Mam nadzieję, że ta edycja nie myli więcej niż powinien. Właśnie szukam wiedzieć, która jest poprawna struktura folderów i forma importu aplikacji Dart.
W skrócie: jak powinno wyglądać drzewo podczas programowania dużej aplikacji w dart i gdzie powinienem dokonać importu? Przyjrzałem się każdej możliwej dokumentacji, w tym kilku tutorialom, ale wszystkie omawiają bardzo proste przykłady, w których duża część kodu znajduje się w folderze web, czego nie chciałbym.
EDIT (podsumowanie i przeformułować, dodać my_app.html i my_app.dart)
W mniej słów:
Mam element niestandardowy zdefiniowany przez my_element.html i my_element.dart (zdefiniowanym powyżej w tym odpowiedzi) i chcę zaimportować go do innego elementu my_app, używając tylko html. To znaczy. nie importując my_element.dart w my_app.dart, ale tylko importowanie my_element.html użyciu znacznika łącza w 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();
}
nie <script type="application/dart" src="../my_element.dart"></script> powinno wystarczyć, aby poinformować kompilator, aby załadować ten dart plik do rejestracji znacznika elementu, podążając za zależnością przechodnią zdefiniowaną przez import html?
Jak działa twój indeks 'main()', '. html', i 'pubspec.yaml' wyglądają? W jakim katalogu są twoje pliki elementów? –
Właśnie edytowałem pytanie, na które wyświetlam żądane informacje. Dzięki za pomoc :). – tomasyany
Aby potwierdzić, czy plik 'my_app.dart' zaimportuje plik' my_element.dart'? –