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

Posted 2023-02-23

【中文标题】聚合物 - 动态加载不同的组件

【英文标题】：Polymer - Load different components dynamically

【发布时间】：2016-09-04 03:32:35

【问题描述】：

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

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

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

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

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

【问题讨论】：

负载不是指<link rel="import" />，对吧？

【参考方案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，您不必使用条件语句污染您的实际元素，仍然可以获得完整的绑定功能。

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

【讨论】：

Polymer.Templatizer 似乎有望成为一种快速（高效）的解决方案。第一个选项看起来很酷，但我想我会尝试一些实际存在的东西。稍后我会告诉你我的情况如何。提前致谢！