如何在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