飛鏢。如何在聚合物的例子中使用@HtmlImport？

我已閱讀文檔解釋@HtmlImprot執行（https://github.com/dart-lang/polymer-dart/wiki/Dart-to-HTML-imports），但我的英語不夠好，我仍然對使用它有點懷疑。請考慮例子：飛鏢。如何在聚合物的例子中使用@HtmlImport？

的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文件中是否正常？
將所有@CustomTag()聲明存儲在一個dart文件中是否正常？

在此先感謝您。

在我第一次遇到緩存問題。我不知道它可能是@HtmlImport或瀏覽器本身，但無論我做出什麼改變都沒有改變templates/ui-elements.html的內容。

來源

2015-04-17 Timur Fayzrakhmanov

爲什麼我必須使用庫名稱;宣言？

我們必須將它粘在某個地方，而且所有文件都應該有一個庫聲明。它也接近你的飛鏢進口，這是很好的。

使用@HtmlImport和？是否有區別？

@HtmlImport只是將<link rel="import">注入頁面。它有很多優點，例如支持package:樣式導入，並允許您的dart依賴項聲明自己的html依賴項，而不是必須瞭解這兩者。

將所有聚合物元素的HTML存儲在一個HTML文件中是否正常？

我不會推薦這樣做。一般而言，如果每個元素都有自己的html文件和dart文件，那麼您的生活將會更加輕鬆。

將所有@CustomTag（）聲明存儲在一個dart文件中是否正常？

與上面相同的答案，我會堅持每個元素類在自己的文件。

來源

2015-04-17 22:18:29

飛鏢。如何在聚合物的例子中使用@HtmlImport？

回答

相關問題