如何在 dom 重复中呈现 html 实体符号？

Question

我问这个问题是因为所有现有的解决方案都存在，例如：

polymer issue 432
polymer issue 1331
entities-in-polymer-element-definition

例如已过时 and/or 不再工作。

我有一个简单的dom-repeat声明：

<template is="dom-repeat" items="[[items]]">
    <a target="_blank" href="[[item.url]]">[[item.label]]</a>
</template>

如您所见，我正在显示一个 URL 列表。当数据源现在包含 html 个实体时：

this.push('items', {
    label: '&copy; Google 2018',
    url: 'http://www.google.de'
});

实体不会呈现：

&copy; Google 2018

我的 <a> 标签没有任何 id，我也不知道哪个数据源项有 html 实体，哪个没有。那么我应该如何使用 Polymer version 2.5.0 渲染 html 个实体？

Answer 1

一个解决方案是为 dom-repeat 中的每个项目分配一个唯一的 id，然后在渲染后在该项目上设置 innerHTML。

在下面的代码中（和 this pen）我设置了 id 和 _assign(index)。在 ready() 方法中，我调用 Polymer.RenderStatus.afterNextRender 等待所有项目绘制，然后使用 querySelector 在同一个庄园中设置锚点 innerHTML id:

<dom-module id="show-entity">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <template is="dom-repeat" items="[[items]]">
      <a target="_blank" id="[[_assign(index)]]" href="[[item.url]]"></a><br>
    </template>
  </template>

  <script>
    /**
     * `show-entity`
     * 
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class ShowEntity extends Polymer.Element {
      static get is() { return 'show-entity'; }
      static get properties() {
        return {
          items: {
            type: Array,
            value: () => { return []; }
          }
        }
      }
      ready() {
        super.ready();
        this.items.push({
          label: '&copy; Google 2018',
          url: 'http://www.google.de'
        },{
          label: '&#167; Google 2018',
          url: 'http://www.google.de'
        });


        Polymer.RenderStatus.afterNextRender( this, () => {
          this.items.forEach((el, idx) => {
            let id = this._assign(idx);
            this.shadowRoot.querySelector('#'+id).innerHTML = el.label;
          });
        })
      }

      _assign(index) {
        return 'foo'+index;
      }
    }

    window.customElements.define(ShowEntity.is, ShowEntity);
  </script>
</dom-module>

请注意，您必须导入 polymer/lib/utils/render-status.html 才能使用 Polymer.RenderStatus.afterNextRender。

如何在 dom 重复中呈现 html 实体符号？

How to render html entity symbols in a dom-repeat?

polymer-2.x