Sto tentando di creare un elemento personalizzato da polymer-element, ma non riesco a rendere operativo il @CustomTag. Il mio dart del file (my_element.dart) si presenta così:Importazione HTML: CustomTag non registrato
@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();
}
Il mio file html (my_element.html) si presenta così:
<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>
Il fatto è che la console Chrome continua a stampare il seguente errore:
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'.
È curioso, perché ho dichiarato il tag personalizzato come dovrebbe essere. Sembra che non abbia letto il file .dart quando raggiunge lo .html.
Il file .html viene chiamato da un altro file principale .html. Penso che l'ordine in cui vengono chiamati i file potrebbe essere il problema, ma poi di nuovo se Dart è compilato prima dell'esecuzione, non dovrebbe importare.
Ho provato diverse soluzioni ma nessuna ha funzionato. L'unico che ha funzionato è piuttosto sporco, che sta importando il file my_element.dart direttamente dal file principale my_app.dart. Immagino che non dovrebbe essere fatto in quel modo perché significherebbe importare ogni singolo file my_element.dart nello stesso main my_app.dart.
EDIT (aggiungere index.html, pubspec.yml)
Il mio file index.html si presenta come segue:
<!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 è un altro elemento su misura, che è l'elemento principale, dove tutti gli altri vanno. In altre parole, è come il controller principale per l'app. Questo elemento ha anche un file .dart e .html, che chiamerà altri elementi come my-element.
Come potete vedere, la mia funzione main() è molto semplice, poiché inizia solo Polimero (vedere index.html).
mio pubspec.yml assomiglia seguente:
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"
mia directory assomiglia a questo (ho appena mostrano una frazione di esso, l'importante spero):
.
├── 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
Spero che questa modifica non confonde più di quanto dovrebbe Sto solo cercando di sapere qual è la corretta struttura delle cartelle e la forma di importazione di un'app Dart.
In breve: come dovrebbe apparire l'albero quando si programma una grande applicazione in freccette e dove dovrei fare le importazioni? Ho esaminato tutta la documentazione che potevo, inclusi alcuni tutorial, ma tutti parlano di esempi molto semplici in cui la maggior parte del codice si trova nella cartella web, che non vorrei.
EDIT (riassumere e riformulare, aggiungere my_app.html e my_app.dart)
In poche parole:
Ho un elemento personalizzato definito da my_element.html e my_element.dart (sopra definita in questa risposta) e voglio per importarlo in un altro elemento my_app utilizzando solo l'html. Cioè non importando my_element.dart in my_app.dart, ma da solo importando my_element.html utilizzando un tag link in 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();
}
non il <script type="application/dart" src="../my_element.dart"></script> dovrebbe essere sufficiente per dire al compilatore di caricare il dardo file per la registrazione del tag dell'elemento seguendo la dipendenza transitiva definita dall'importazione HTML?
Come funziona l'indice 'main()', '. html', e 'pubspec.yaml' assomiglia? In quale directory ci sono i tuoi file di elementi? –
Ho appena fatto una modifica alla domanda in cui mostro le informazioni richieste. Grazie per l'aiuto :). – tomasyany
Giusto per confermare, il tuo file 'my_app.dart' importa il tuo file' my_element.dart'? –