javascript - 如何在 Polymer 元素定义中分配 HTML 实体？

Question

替代问题版本：在 Polymer 元素定义中添加时，如何防止 HTML 实体被转义？

所以假设这个简化的例子（所有包含的聚合物库都添加到真实代码中）：

元素定义

<polymer-element name="x-test" attributes="val">
  <template>
    <div>{{shownVal}}</div>
  </template>
  <script>
    Polymer( 'x-test', {
      shownVal: '',
      valChanged: function(){
        this.shownVal = this.val + ' &amp;';
      }
  });
  </script>
</polymer-element>

元素使用

<x-test val="123"></x-test>

这将导致如下输出：

123&

版本：聚合物 0.1.2

我需要更改/添加什么以获得类似的输出123 &？

或者这是某种错误，我应该让 Polymer 人员知道？

我知道，我可以在其中添加实体，<template>这会起作用，但是我有一些代码，它修改了输入属性并需要使用实体。

---

注意：如果使用这样的元素

<x-test val="123 &amp;"></x-test>

一切都很好。

Answer 1

有几种方法可以做到这一点：

• 自定义过滤器（尚未记录）

  encodeEntities: function(value) {
    var div = document.createElement('div');
    div.innerHTML = this.shownVal;
    return div.innerHTML;
   }
  

• 使用自动节点查找并设置.innerHTML某个容器的。

  this.$.container.innerHTML = this.shownVal;
  

演示显示这两个：http: //jsbin.com/uDAfOXIK/2/edit