polymer-element'dan özel bir öğe oluşturmaya çalışıyorum, ancak @CustomTag işini yapamıyorum. Benim dart dosyası (my_element.dart) şöyle görünür:HTML içe aktarma: CustomTag kayıtlı değil
@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();
}
Benim html dosyası (my_element.html) şöyle görünür:
<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>
şey Krom konsol şu hatayı baskı devam ediyor olmasıdır:
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'.
Özel etiketin olması gerektiği gibi bildirildiğinden merak ediyorum. .html'a ulaştığında .dart dosyasını okumadığı görülüyor.
.html dosya başka bir üst .html dosyasından çağrılır. Dosyaların çağrılma sırasının sorun olabileceğini düşünüyorum, ancak yine de Dart'ın çalışmadan önce derlenmesi durumunda, umursamamalı.
Birkaç çözüm denedim ama hiçbiri işe yaramadı. Çalışılan tek şey oldukça kirli olan, yani my_element.dart dosyasını doğrudan ana my_app.dart dosyasından içe aktarıyor. Sanırım bu şekilde yapılmamalı çünkü bu her my_element.dart dosyasını aynı ana my_app.dart numaralı dosyaya aktarmak anlamına geliyor.
Benim index.html dosyası aşağıdaki gibi görünür
DÜZENLEME (index.htmlpubspec.yml ekleyin):
<!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 tüm diğerleri gitmek ana unsurdur başka bir özel elementtir. Başka bir deyişle, uygulamanın ana denetleyicisi gibi. Bu elemanın .dart ve .html dosyalarının yanı sıra my-element gibi diğer öğeleri de arayabilirsiniz.
Gördüğünüz gibi, main() işlevim çok basittir, çünkü yalnızca init Polymer (bkz. index.html).
.
├── 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
Bu düzenleme umut:
Benim dizin şöylename: 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"
(ben sadece bir kısmını, umarım önemli bir göster):
Benimpubspec.yml aşağıdaki gibi görünür gerekenden fazlasını karıştırmaz. Ben sadece bir Dart app doğru klasör yapısı ve ithalat formu olduğunu bilmek istiyorum. Kısa vadede: büyük bir uygulamayı dartta programlarken ağaç nasıl görünmeli ve ithalatı nerede yapmalıyım? Bazı öğreticiler de dahil olmak üzere her türlü belgeye bakıyorum, ancak hepsinin, kodun büyük kısmının, istemediğim web klasöründe olduğu çok basit örnekler hakkında konuştuk.
DÜZENLEME (my_app.html ve my_app.dart ekleyin özetlemek ve ifadeleri) Daha az deyişle
: I (bu yanıtında yukarıda tanımlanan) my_element.html ve my_element.dart tarafından tanımlanan özel bir elemanı ettik
ve istediğim sadece html kullanarak başka bir my_app öğeye içe aktarılır. Yani değil my_app.dart yılında my_element.dart ithal ederek, ama sadece my_app.html bir bağlantı etiketi kullanarak my_element.html ithal ederek:
<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();
}
değil <script type="application/dart" src="../my_element.dart"></script> o dart yüklemek için derleyici anlatmak için yeterli olmalı html içe aktarması tarafından tanımlanan geçiş bağımlılığını izleyerek öğe etiketini kaydetmek için dosya?
'main()', 'index'iniz nasıldır? html' ve 'pubspec.yaml' benziyor? Öğe dosyalarınız hangi dizinde? –
Sadece istenen bilgileri gösterdiğim soruya bir değişiklik yaptım. Yardım ettiğin için teşekkür ederim :). – tomasyany
Sadece onaylamak için 'my_app.dart' dosyanız' my_element.dart' dosyanızı içe aktarıyor mu? –