I have a JSON file in which some of the elements contain html code and try to load this into a Polymer element. However, Polymer renders the html as plain text. How do I get Polymer to render the html-code as html?
Example JSON array:
[
{
"id" = "nr1",
"content" = "some text with <i>italic</it> parts"
}, {
"id" = "nr2",
"content" = "some text with <span class="test">formatted</span> parts"
}
]
Polymer element:
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-ajax/iron-ajax.html">
<dom-module id="load-epi">
<style>
</style>
<template>
<iron-ajax
auto
url="epigraphs.json"
handle-as="json"
last-response="{{epigraphs}}"></iron-ajax>
<div class="test">
<div class="selectedcontent">
<p>{{selected.content}}</p>
<p class="selectedid">{{selected.id}}</p>
</div>
</div>
</template>
<script>
Polymer({
is: 'load-epi',
properties: {
epigraphs: {
type: Array,
notify: true,
value: function(){return []}
},
selected: {
type: Array,
computed: 'selectEpigraph(epigraphs)'
}
},
selectEpigraph: function(epigraphs) {
var epi = Math.floor((Math.random() * epigraphs.length));
return epigraphs[epi]
}
});
</script>
</dom-module>