I'm working on an Ember.js application that displays content from a Wordpress backend. In addition to text, this content can contain arbitrary javascript that is typical in the embed code of various social media sites (Facebook, Instagram, Twitter). Unfortunately, this javascript doesn't seem to get executed when the page loads which causes the page to not render the correct content.
Here is what I'm using in my template to render the post content:
{{{model.content}}}
And this is some example content that is not being rendered correctly:
<div id="fb-root"></div>
<script>// <![CDATA[
(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
// ]]></script>
<div class="fb-post" data-href="https://www.facebook.com/185429188166097/photos/a.185450081497341.36203.185429188166097/852153634826979/?type=1" data-width="600">
<div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/185429188166097/photos/a.185450081497341.36203.185429188166097/852153634826979/?type=1">Post</a> by <a href="https://www.facebook.com/pages/Sonnie-Trotter/185429188166097">Sonnie Trotter</a>.</div>
</div>
Is something like this possible?