在飞镖聚合物中动态导入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模板

回答

相关问题