Tôi đang cố gắng tạo phần tử tùy chỉnh từ polymer-element, nhưng tôi không thể thực hiện công việc @CustomTag. tập tin dart của tôi (my_element.dart) trông như thế này:Nhập HTML: CustomTag chưa được đăng ký
@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();
}
tập tin html của tôi (my_element.html) trông như thế này:
<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>
Cái này là giao diện điều khiển Chrome vẫn tiếp tục in các lỗi sau:
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'.
Thật kỳ lạ, bởi vì tôi đã khai báo thẻ tùy chỉnh như mong muốn. Có vẻ như nó chưa đọc tệp .dart khi nó đạt đến số .html.
Tệp .html được gọi từ một tệp cha khác .html. Tôi nghĩ rằng thứ tự mà các tập tin được gọi có thể là vấn đề, nhưng sau đó một lần nữa nếu Dart được biên dịch trước khi chạy, nó không nên quan tâm.
Tôi đã thử một số giải pháp nhưng không có giải pháp nào trong số họ đã hoạt động. Người duy nhất làm việc khá là bẩn, đang nhập tệp my_element.dart trực tiếp từ tệp my_app.dart chính. Tôi đoán nó không nên được thực hiện theo cách đó bởi vì đó có nghĩa là để nhập khẩu mỗi tập tin my_element.dart duy nhất trong cùng một chính my_app.dart.
EDIT (thêm index.html, pubspec.yml)
tập tin index.html tôi trông giống như sau:
<!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 là một yếu tố tùy chỉnh, đó là yếu tố chính mà tất cả những người khác đi. Nói cách khác, nó giống như bộ điều khiển chính cho ứng dụng. Phần tử này có tệp .dart và .html, sẽ gọi các thành phần khác như my-element.
Như bạn có thể thấy, hàm main() của tôi rất đơn giản, vì nó chỉ khởi động Polymer (xem index.html).
pubspec.yml tôi trông giống như sau:
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"
thư mục My trông như thế này (tôi chỉ hiển thị một phần nhỏ của nó, là quan trọng Tôi hy vọng):
.
├── 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
Tôi hy vọng rằng chỉnh sửa này không gây nhầm lẫn nhiều hơn nó nên. Tôi chỉ đang tìm hiểu cấu trúc thư mục chính xác và biểu mẫu nhập của ứng dụng Dart.
Về ngắn hạn: cây nên trông như thế nào khi lập trình một ứng dụng lớn trong phi tiêu và tôi nên nhập khẩu ở đâu? Tôi đã xem mọi tài liệu có thể, bao gồm một số hướng dẫn, nhưng tất cả chúng đều nói về các ví dụ rất đơn giản, nơi phần lớn của mã nằm trong thư mục web, mà tôi không muốn.
EDIT (tóm tắt và nói lại, thêm my_app.html và my_app.dart)
Nói cách ít:
tôi đã là một yếu tố tùy chỉnh được định nghĩa bởi my_element.html và my_element.dart (định nghĩa ở trên trong câu trả lời này) và tôi muốn để nhập nó vào thành phần khác my_app chỉ sử dụng html. I E. không bằng cách nhập my_element.dart trong my_app.dart, nhưng chỉ nhập khẩu my_element.html sử dụng một thẻ liên kết trong 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();
}
nên không phải là <script type="application/dart" src="../my_element.dart"></script> đủ để cho trình biên dịch để nạp phi tiêu mà tệp để đăng ký thẻ phần tử bằng cách theo dõi sự phụ thuộc transitive được xác định bởi nhập html?
Chỉ mục 'chính()', 'của bạn. html' và 'pubspec.yaml' trông giống như thế nào? Trong thư mục nào là các tệp phần tử của bạn? –
Tôi vừa chỉnh sửa câu hỏi mà tôi hiển thị thông tin được yêu cầu. Cảm ơn bạn đã giúp đỡ :). – tomasyany
Chỉ cần xác nhận, tệp 'my_app.dart' của bạn có nhập tệp' my_element.dart' của bạn không? –