我是聚合物新手,但我想答案是什么......
最近我遇到了这个问题:我必须遍历一系列元素(使用dom-repeat)并显示其内容。但是每个元素都有独特的显示和绑定,因此几乎不可能动态显示每个元素。理想的情况是为每种显示类型加载不同的组件,但看起来没有简单的方法来实现这一点。
我一直在考虑的一些选项如下:
dom-if
,但会在我生成的HTML中添加垃圾。dom-switch
吗?如果它是那样的并且没有留下空的模板标签(就像它对dom-if
那样),那就太好了。<[[item.type]] item-configuration=[[item.configuration]]></[[item.type]]>
还有其他想法吗?我真的很感激任何想法或解决方案,或者至少是我的问题的解决方法。
答案 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
面对选择要动态渲染的元素的类似问题,我创建了this Plunk作为概念验证。
如您所见,您使用与模型匹配的自定义规则扩展<template>
元素。然后使用Polymer.Templatizer
将匹配模板的节点与模型绑定。
感谢Templatizer,你不必用条件污染你的实际元素,仍然可以获得完整的绑定功能。
我正在开发一个功能更完善的解决方案。如果您感兴趣,我可以将其移至单独的存储库并发布。