【发布时间】:2016-02-03 20:48:18
【问题描述】:
我遇到的问题与this 问题描述的几乎相同。
我有一些 svg 符号,我想用 Polymers dom-repeat 动态插入。
我使用一个函数从数组{{icons}} 中需要的符号中获取所有ID,然后我将其循环为真以插入我的svg。
我的代码如下所示:
<div class = 'housing-icons'>
<template is="dom-repeat" items="{{icons}}">
<div id = 'BUTTONID'>
<svg class="icon">
<use xlink:href$='{{item.id}}'></use>
<!--<use xlink:href='#bed'></use>--> !!! This works as expected !!!
</svg>
</div>
<paper-tooltip class="tooltip" for="BUTTONID" animation-config="{"entry": [], "exit": []}" position="top"><div class="tooltip__label">Lorem ipsum</div></paper-tooltip>
</template>
</div>
当我在 <use> 标签中硬编码 id #bed 时,一切都很好,在开发工具中看起来像这样:
<use xlink:href="#bed" class="style-scope custom-housing_icons"></use>
但是当我想使用数据绑定{{item.id}} 时,图标不显示,在开发工具中看起来像这样:
<use class="style-scope custom-housing_icons" xlink:href="#bed"></use>
任何解决此问题的想法将不胜感激
【问题讨论】:
标签: javascript html data-binding polymer xlink