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

Question

我是 Polymer 新手，但我猜答案会是什么……

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

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

• 使用 dom-if 但它会给我生成的 HTML 添加废话。
• 有dom-switch吗？如果是这样并且没有留下空模板标签（就像 dom-if 那样），那就太好了。
• 可以动态加载组件吗？使用类似这样的东西：<[[item.type]] item-configuration=[[item.configuration]]></[[item.type]]>

还有其他想法吗？我真的很感激任何想法或解决方案，或者至少是我的问题的解决方法。

Answer 1

TL;DR;你不能

Polymer（我猜一般是 Web 组件）在以声明方式使用时是最好的。开箱即用的最佳解决方案是动态创建元素并添加到 DOM 或乱用 dom-if。

（潜在的）选项 1

我想你可以很容易地实现一个 dom-switch 元素来像这样工作

<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>

我在脑海中写下了这个。有多种方法可以实现这样的元素。一个关键的决定是是否在内部使用<template>。在this plunk 中，我实现了这样的元素，没有模板，而只是使用内容分发。

选项 2

还有Polymer.Templatizer。

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

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

感谢 Templatizer，您不必使用条件语句污染您的实际元素，仍然可以获得完整的绑定功能。

我正在开发一个功能更完整的解决方案。如果您有兴趣，我可以将其移至单独的存储库并发布。