如何在Polymer元素定义中分配HTML实体？ [英] How to assign HTML entities in Polymer element definition?

问题描述

替代问题的版本：如何防止HTML实体在聚合元素定义中添加时被转义？ 示例（所有包含聚合物库的都添加在实际代码中）：

元素定义

 < polymer-element name =x-testattributes =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>< / p>

版本：聚合物0.1。 2

我需要更改/添加如 123& ？

或者这是一种错误，我应该让聚合物家伙知道？

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

---

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

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

一切都呈现良好。

解决方法

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

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

    encodeEntities：function（value）{
   var div = document.createElement（'div'）; 
   div.innerHTML = this.shownVal; 
  返回div.innerHTML; 
  } 
    




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

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

演示显示以下两项： http://jsbin.com/uDAfOXIK/2/edit

Alternative question version: How to prevent HTML entities from being escaped, when added in the Polymer element definition?

So assume this simplified example (all includes of polymer libraries are added in the real code):

element definition

<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>

element usage

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

This will result in an output like this:

123 &amp;

Version: Polymer 0.1.2

What do I need to change/add to have an output like 123 &?

Or is this some kind of bug, I should let the Polymer guys know about?

I know, that I could add the entity in the <template> and this would work, but I have some code, which modifies the input attributes and needs to use entities.

---

Note: If using the element like this

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

everything renders fine.

解决方案

There are a couple of ways to do this:

• Custom filters (not documented yet)

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

• Use automatic node finding and set the .innerHTML of some container.

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

Demo showing both of these: http://jsbin.com/uDAfOXIK/2/edit

这篇关于如何在Polymer元素定义中分配HTML实体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！