【问题标题】:Polymer dom-repeat xlink not rendered as expectedPolymer dom-repeat xlink 未按预期呈现
【发布时间】: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>

当我在 &lt;use&gt; 标签中硬编码 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


    【解决方案1】:

    这是一个已知问题。还应该有另一个 SO 问题。 AFAIR 一种解决方法是静态添加命名空间

    <use xlink:href$='{{item.id}}' xlink:href='#dummy'></use>
    

    Polymer 似乎能够更新 xlink:href 就好了,但无法创建它。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-02-23
      • 2018-10-01
      • 2014-09-29
      • 2017-01-26
      • 1970-01-01
      • 1970-01-01
      • 2021-03-12
      • 1970-01-01
      相关资源
      最近更新 更多