Question

我已经阅读了文档解释@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');
}

模板/ 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文件中是否正常？
在一个dart文件中存储所有@CustomTag()声明是否正常？

提前谢谢。

我第一次遇到缓存问题。我不知道它可能是@HtmlImport还是浏览器本身，但是我所做的任何改变都没有改变templates/ui-elements.html的内容。

Answer 1

为什么我必须使用库名;声明？

我们不得不把它贴在某处，所有文件都应该有一个库声明。它也靠近你的飞镖进口，这很不错。

使用@HtmlImport和？
之间有什么区别吗？

@HtmlImport只需在页面中注入<link rel="import">即可。它有一些优点，例如支持package:样式导入，并允许你的dart依赖项声明它们自己的html依赖项，而不是你必须知道它们。

将所有聚合物元素的HTML存储在一个HTML文件中是否正常？

我不建议这样做。一般来说，如果每个元素都有自己的html文件和dart文件，你的生活会更容易。

在一个dart文件中存储所有@CustomTag（）声明是否正常？

与上面的答案相同，我会将每个元素类都放在自己的文件中。

镖。如何在Polymer的例子中使用@HtmlImport？

1 个答案: