如何在 dom-repeat 中呈现 html 实体符号？答案

【问题标题】：How to render html entity symbols in a dom-repeat?如何在 dom-repeat 中呈现 html 实体符号？
【发布时间】：2018-08-20 12:03:41
【问题描述】：

我问这个问题是因为现有的所有现有解决方案都像：

例如已经过时和/或不再工作。

我有一个简单的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实体呢？

【问题讨论】：

我没有尝试过lit-html (github.com/Polymer/lit-html)，但也许这适用于这种情况。您可以将问题提交给@justinfagnani。
我已经尝试了几个小时，但仍然不知道如何使用lit-html解决这个问题

标签： polymer-2.x

【解决方案1】：

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

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

<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`
     * https://stackoverflow.com/questions/21060890/
     *
     * @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。

【讨论】：