如何在dom-repeat中呈现html实体符号?

时间:2018-03-12 12:51:42

标签: polymer-2.x

我问这个问题,因为所有现有的解决方案都存在,如:

例如,

已经过时和/或不再有效。

我有一个简单的DocumentRoot /var/www/html/public/ <Directory /var/www/html/public/> Options FollowSymlinks AllowOverride None Order Allow,Deny Allow from All <IfModule mod_rewrite.c> Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(.*)$ index.php [QSA,L] RewriteCond %{HTTP:Authorization} ^(.*) RewriteRule .* - [e=HTTP_AUTHORIZATION:%1] </IfModule> </Directory> 声明:

dom-repeat

正如你在这里看到我展示的网址列表。当数据源现在包含html实体时:

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

实体不会呈现:

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

我的&copy; Google 2018 标签没有任何ID,我也不知道哪个数据源项有html实体,哪些没有。那我怎么用<a>渲染html实体?

1 个答案:

答案 0 :(得分:1)

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

在以下代码(和this pen)中,我使用id设置了_assign(index)。在ready()方法中,我调用Polymer.RenderStatus.afterNextRender等待绘制所有项目,然后设置锚点&#39; innerHTML使用querySelector 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` * 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

请注意,您必须导入// Read from config var assemblyPath = "..."; var typeName = "..."; var assembly = Assembly.LoadFrom(assemblyPath); var loggerType = assembly.GetType(typeName); var serviceProvider = new ServiceCollection() .AddTransient(typeof(IDILogger), loggerType) .BuildServiceProvider(); var logger = serviceProvider.GetService<IDILogger>(); 才能使用Polymer.RenderStatus.afterNextRender