Polymer - 动态加载不同的组件

时间:2016-05-09 13:15:56

标签: javascript dom dynamic polymer components

我是聚合物新手,但我想答案是什么......

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

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

  • 使用dom-if,但会在我生成的HTML中添加垃圾。
  • dom-switch吗?如果它是那样的并且没有留下空的模板标签(就像它对dom-if那样),那就太好了。
  • 可以动态加载组件吗?使用类似这样的内容:<[[item.type]] item-configuration=[[item.configuration]]></[[item.type]]>

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

1 个答案:

答案 0 :(得分:1)

TL; DR; 你不能

当以声明方式使用时,聚合物(以及我猜的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,你不必用条件污染你的实际元素,仍然可以获得完整的绑定功能。

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