why polymer not render html markup fetched from server in json format?

debugcn Published at Dev

Peng Kim

my custom element:

<core-ajax auto method="GET" url="http://example.com/book" handleAs="json" response="{{response}}"></core-ajax>
      <core-header-panel mode="cover" layout horizontal flex>   
        <div  class="core-header tall">{{articlename}}</div>
        <div  class="content" flex >
          {{response[0].content}}
        </div>
</core-header-panel>

content in db was stored in markdown format,it will be transformed to html markup when requested,this process was fine,i got the transformed html markup,but when it dynamically inserted into the page, the html markup wasn't rendered whereas original html tag .

markdown to html:(i use django-markdown-deux)

markdown(content)

original data from db:

[{"id":4,"title":"css 1","category":"CSS","articletags":["sa","asd"],"content":"*asdsdsasadsa*\r\n\r\n    sdsadsadssdsasdsa","like":0,"createtime":"2015-04-17T05:58:01Z"}]

parsed data from db:

[{"id":4,"title":"css 1","category":"CSS","articletags":["sa","asd"],"content":"<p><em>asdsdsasadsa</em></p>\n\n<pre><code>sdsadsadssdsasdsa\n</code></pre>\n","like":0,"createtime":"2015-04-17T05:58:01Z"}]

and result is :

enter image description here

did i miss something?

Scarygami

Polymer escapes any HTML when data-binding for security reasons. You would have to manually set the contents when the response comes in. Something like:

<core ajax ... on-core-response="{{handleResponse}}"></core-ajax>
<div id="content"></div>

...

Polymer({
   ...
   handleResponse: function (e) {
     this.injectBoundHTML(e.detail.response[0].content, this.$.content);
   }
});

See official docs for more information about this.

Collected from the Internet

Please contact [email protected] to delete if infringement.