在飛鏢聚合物中動態導入HTML模板

我已經成功用dart動態創建聚合物組件並添加到dom中。在飛鏢聚合物中動態導入HTML模板

但現在我想這樣做無需必須在編譯時靜態導入HTML模板。

在我的使用案例中，我有一個ID爲myContainer的div容器和一個定製的Polymer Dart組件，其標籤爲my-tag。

我tryied有：

LinkElement e = new LinkElement('link'); 
e.rel = 'import'; 
e.href= 'my-tag.html'; 
document.head.children.add(e); 

$['myContainer'].children.add(new Element.tag('my-tag'));

但這結束，以下情況例外：

Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type 'HTML' may not be inserted inside nodes of type '#document'. 
...

注意，當聚合物元素被添加到DOM，而不是異常瑞森添加鏈接標籤時。如果在編譯時添加鏈接並評論在運行時添加鏈接的代碼，也可以使用相同的代碼。

我也嘗試過幾種不同的上述代碼，主要是在polymerInit或polymerInit().run(...)之前調用的單獨方法中添加鏈接標記，但沒有任何更改。

我想知道這個用例是否被支持。

來源

2014-09-18 Vittorio Ballestra

爲什麼你不想靜態添加導入？我認爲聚合物變形金剛在你建立這個項目時需要它們。 – 2014-09-19 09:01:00

因爲我想創建一個組件庫，在用戶點擊時通過導航框架顯示在內容區域中。我已經需要從「導航器」的飛鏢側導入每個組件，但這並不是很糟糕，因爲我需要註冊「路線」。但是我試圖找到一種不在HTML端包含HTML模板的方法，並儘量減少了添加新「頁面」所需的工作。 – 2014-09-19 09:16:43

您可以創建一個變壓器。 – 2014-09-19 09:17:10

嘗試添加HeadElement：

LinkElement e = new LinkElement(); 
e.rel = 'import'; 
e.href= 'my-tag.html'; 
HeadElement h = new HeadElement(); 
h.children.add(e); 
document.head.children.add(h);

來源

2014-09-19 08:35:53 JoaoBiriba

你真的需要'HeadElement'嗎？我原以爲你可以做'document.head.append（new LinkElement（）.. rel ='import'.. href ='my-tag.html'）;'。這是否也適用於JavaScript？ – 2014-09-19 08:45:56

@JoaoBiriba我會嘗試，但我已經可以告訴你這個事實：即使沒有（重新）添加head元素（它已經存在於文檔中）通過使用chrome檢查dom，我注意到link元素實際上被添加了，並且只有當我嘗試將組件添加到dom而不是添加鏈接標記時纔會觸發異常。另一方面，如果我添加鏈接標籤「手動」它的作品。 – 2014-09-19 08:57:36

建在js給出相同的結果，但是你的解決方案更清潔，不知道他是否真的需要HeadElement。 – JoaoBiriba 2014-09-19 08:57:56

可能可以創建一個變壓器是這樣做的。變換器由pub構建和pub pub執行，可以在構建過程中分析和修改代碼。 dartlang.org/tools/pub/assets-and-transformers.html，dartlang.org/tools/pub/transformers

或

（我還沒有嘗試過，但我相信它會工作）
您可以創建一個HTML文件，其中包含您的軟件包需要的所有導入，並且您的軟件包的用戶只需導入這一個文件。

來源

2014-09-19 09:18:31

創建一個導入所有其他文件的html文件不起作用。但變壓器的方式聽起來很有趣，我會調查。 – 2014-09-19 09:24:36

我認爲這就是Dart核心元素和紙元素所看到的，例如https://github.com/dart-lang/core-elements/blob/master/lib/core_animated_pages.html – 2014-09-19 09:51:21

mmh。不確定在這種情況下需要導入core_selector（它在私有實現中重複），另一個導入在該模板中使用（實際上它是模板），這不像用於其他文件的導出。 – 2014-09-19 15:46:57

在飛鏢聚合物中動態導入HTML模板

回答

相關問題