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

本文介绍了镖。如何在@HtmlImport上使用Polymer的例子？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已阅读文档说明 @HtmlImprot 实现（），但我的英语isn' t足够好，我仍然有一点疑惑使用它。请考虑以下示例：

index.html

 code><！DOCTYPE html> 
< html> 
< head lang =en> 
< meta charset =UTF-8> 
< title>< / title> 
< link rel =stylesheethref =main.css/> 
< / head> 
< body> 
< app-element>< / app-element> 
 
< script type =application / dartsrc =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 p>

 < link rel =importhref =../ packages / polymer / polymer.html> 
< polymer-element name =ui-buttonnoscript> 
< template> 
< h2> app-element＃> ui按钮＃> h2< / h2> 
< / template> 
< / polymer-element> 
 
< polymer-element name =app-elementnoscript> 
< template> 
< h2> app-element＃> h2< / h2> 
< ui-button>< / ui-button> 
< / template> 
< / polymer-element>

问题：

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

使用 HtmlImport 和< link rel =importhref =/> ？

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

提前感谢。

我第一次遇到缓存的问题。我不知道也许是 @HtmlImport 或浏览器本身，但无论如何更改我没有改变在 templates / ui-elements.html 的内容。

解决方案

我们不得不粘在某处，所有文件都应该有一个库声明。

@HtmlImport 只注入一个< link rel = > 。它有优势，虽然支持 package：样式导入，并且允许你的dart依赖声明自己的html依赖，而不必了解这两者。

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

同上面的答案，我会坚持每个元素类在自己的文件。 >

I've read the doc explains @HtmlImprot implementation (https://github.com/dart-lang/polymer-dart/wiki/Dart-to-HTML-imports), but my English isn't good enough and I still have a little doubts about using it. Please, consider the example:

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>

Questions:

Why I have to use library name; declaration?
Are there any difference between using @HtmlImport and <link rel="import" href=""/>?
Is it normal to store all polymer-element's HTML in one HTML file?
Is it normal to store all @CustomTag() declaration in the one dart file?

Thank you in advance.

At the first time I had the problem with cache. I don't know maybe it was @HtmlImport or browser itself, but whatever changes I made nothing had changed in templates/ui-elements.html's content.

解决方案

We had to stick it somewhere, and all files should have a library declaration anyways. It is also near your dart imports which is kind of nice.

@HtmlImport just injects an <link rel="import"> into the page. It has advantages though such as supporting package: style imports and also allowing your dart dependencies to declare their own html dependencies, instead of you having to know about both.

I would not recommend doing this. In general your life will be easier if each element has its own html file and dart file.

Same answer as above, I would stick each elements class in its own file.

这篇关于镖。如何在@HtmlImport上使用Polymer的例子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

DART

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

问题描述