Javascript 聚合物-动态加载不同的组分

我是一个聚合物新手，但我猜答案是

最近我遇到了这个问题：我循环了一组元素（使用dom repeat）并显示其内容。但是每个元素都有唯一的显示和绑定，因此几乎不可能动态显示每个元素。理想的情况是为每种显示类型加载不同的组件，但似乎没有简单的方法来实现这一点

我一直在考虑的一些选择如下：

• 使用

  dom if

  ，但它会给我生成的HTML添加垃圾
• 是否有

  dom开关

  ？如果它是这样的，并且没有留下空的模板标记（就像

  dom如果

  那样），那就太好了
• 可以动态加载组件吗？使用类似的方法：

---

还有其他想法吗？我非常感谢您能为我的问题提供任何想法或解决方案，或者至少是一个解决方案。

TL；博士你不能

聚合物（我想一般来说是Web组件）在声明性方式中使用时是最好的。开箱即用的最佳解决方案是动态创建元素并添加到DOM中，或者在的情况下乱用

DOM

（潜在）选项1

我想您可以相当容易地实现一个
dom开关
元素

<template-switch switch="[[some.value]]">
  <template-case case="10">
     <element-one></element-one>
  </template-case>

  <template-case case="20">
     <element-two></element-two>
  </template>

  <template-default>
     <element-one></element-one>
  </template-default>
</dom-switch>



我把这件事记下来了。实现这样一个元素有多种方法。一个关键的决定是是否在内部使用
。在中，我实现了这样的元素，没有模板，只是使用了内容分发

选项2

还有

面对选择动态渲染元素的类似问题，我创建了一个作为概念证明的元素

如您所见，您使用与模型匹配的自定义规则扩展了
元素。然后使用
Polymer.Templatizer
将匹配模板的节点与模型绑定

多亏了Templatizer，您不必用条件来污染实际的元素，而且仍然可以获得完整的绑定功能

我正在开发一个功能更完整的解决方案。如果您感兴趣，我可以将其移动到单独的存储库并发布。
您所说的加载并不是指
，对吗？Polymer.Templatizer似乎有望成为一个快速（高效）的解决方案。第一个选项看起来很酷，但我想我会尝试一些实际存在的东西。以后我会告诉你我的情况。提前谢谢！