镖。如何在 Polymer 的例子中使用@HtmlImport?
Dart. How to use @HtmlImport on the example of Polymer?
我已经阅读了解释 @HtmlImprot
实现的文档 (https://github.com/dart-lang/polymer-dart/wiki/Dart-to-HTML-imports),但我的英语不够好,我对使用它仍有一点疑问。请考虑示例:
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="main.css"/>
</head>
<body>
<app-element></app-element>
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
main.dart
@HtmlImport('templates/ui-elements.html')
library main;
import 'dart:html';
import 'package:polymer/polymer.dart';
main() {
initPolymer();
}
@whenPolymerReady
void onReady() {
print('polymer is loaded');
}
templates/ui-elements.html
<link rel="import" href="../packages/polymer/polymer.html">
<polymer-element name="ui-button" noscript>
<template>
<h2>app-element# > ui-button# > h2</h2>
</template>
</polymer-element>
<polymer-element name="app-element" noscript>
<template>
<h2>app-element# > h2</h2>
<ui-button></ui-button>
</template>
</polymer-element>
问题:
- 为什么我必须使用
library name;
声明?
- 使用
@HtmlImport
和<link rel="import" href=""/>
有什么区别吗?
- 将所有聚合物元素HTML存储在一个HTML文件中是否正常?
- 将所有
@CustomTag()
声明存储在一个dart文件中是否正常?
提前致谢。
第一次遇到缓存问题。我不知道可能是 @HtmlImport
还是浏览器本身,但无论我做了什么更改,templates/ui-elements.html
的内容都没有改变。
Why I have to use library name; declaration?
我们不得不把它贴在某个地方,无论如何所有文件都应该有一个库声明。它也靠近你的飞镖进口,这很好。
Are there any difference between using @HtmlImport and ?
@HtmlImport
只是将 <link rel="import">
注入页面。它有很多优点,例如支持 package:
样式导入,还允许您的 dart 依赖项声明它们自己的 html 依赖项,而不是您必须了解两者。
Is it normal to store all polymer-element's HTML in one HTML file?
我不建议这样做。一般来说,如果每个元素都有自己的 html 文件和 dart 文件,您的生活会更轻松。
Is it normal to store all @CustomTag() declaration in the one dart file?
与上面的答案相同,我会将每个元素 class 粘贴到它自己的文件中。
我已经阅读了解释 @HtmlImprot
实现的文档 (https://github.com/dart-lang/polymer-dart/wiki/Dart-to-HTML-imports),但我的英语不够好,我对使用它仍有一点疑问。请考虑示例:
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="main.css"/>
</head>
<body>
<app-element></app-element>
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
main.dart
@HtmlImport('templates/ui-elements.html')
library main;
import 'dart:html';
import 'package:polymer/polymer.dart';
main() {
initPolymer();
}
@whenPolymerReady
void onReady() {
print('polymer is loaded');
}
templates/ui-elements.html
<link rel="import" href="../packages/polymer/polymer.html">
<polymer-element name="ui-button" noscript>
<template>
<h2>app-element# > ui-button# > h2</h2>
</template>
</polymer-element>
<polymer-element name="app-element" noscript>
<template>
<h2>app-element# > h2</h2>
<ui-button></ui-button>
</template>
</polymer-element>
问题:
- 为什么我必须使用
library name;
声明? - 使用
@HtmlImport
和<link rel="import" href=""/>
有什么区别吗? - 将所有聚合物元素HTML存储在一个HTML文件中是否正常?
- 将所有
@CustomTag()
声明存储在一个dart文件中是否正常?
提前致谢。
第一次遇到缓存问题。我不知道可能是 @HtmlImport
还是浏览器本身,但无论我做了什么更改,templates/ui-elements.html
的内容都没有改变。
Why I have to use library name; declaration?
我们不得不把它贴在某个地方,无论如何所有文件都应该有一个库声明。它也靠近你的飞镖进口,这很好。
Are there any difference between using @HtmlImport and ?
@HtmlImport
只是将 <link rel="import">
注入页面。它有很多优点,例如支持 package:
样式导入,还允许您的 dart 依赖项声明它们自己的 html 依赖项,而不是您必须了解两者。
Is it normal to store all polymer-element's HTML in one HTML file?
我不建议这样做。一般来说,如果每个元素都有自己的 html 文件和 dart 文件,您的生活会更轻松。
Is it normal to store all @CustomTag() declaration in the one dart file?
与上面的答案相同,我会将每个元素 class 粘贴到它自己的文件中。