javascript - Binding to strings containing custom components in Ember.js -

i'm trying display string, pulled model, contains ember custom components. don't seem compiled though -- see (1) , (2) in output. if replace custom components standard html elements , use {{{-}}} syntax binding, things right (see (3) , (4) in output), not sufficient application have in mind, though. how can ember compile custom components before displaying them?

app.js:

app = ember.application.create();  var g1 = "{{#my-bold}}yo{{/my-bold}}, {{#my-italic}}dude{{/my-italic}}!"; var g2 = "<b>yo</b>, <i>dude</i>!";  app.indexroute = ember.route.extend({  model: function() {     return {greeting1: g1, greeting2: g2}   }     });  app.myboldcomponent = ember.component.extend({tagname: "span"});  app.myitaliccomponent = ember.component.extend({tagname: "span"}); 

index.html

<script type="text/x-handlebars"> {{outlet}} </script>  <script type="text/x-handlebars" id="components/my-bold"><b>{{yield}}</b></script> <script type="text/x-handlebars" id="components/my-italic"><i>{{yield}}</i></script>  <script type="text/x-handlebars" id="index">   <ol>     <li>{{model.greeting1}}</li>     <li>{{{model.greeting1}}}</li>     <li>{{{model.greeting2}}}</li>     <li>{{#my-bold}}yo,{{/my-bold}} {{#my-italic}}dude!{{/my-italic}}</li>   </ol>  </script> 

output:

1. {{#my-bold}}yo{{/my-bold}}, {{#my-italic}}dude{{/my-italic}}!
2. {{#my-bold}}yo{{/my-bold}}, {{#my-italic}}dude{{/my-italic}}!
3. yo, dude!
4. yo, dude!

from ember.js issue tracker https://github.com/emberjs/ember.js/issues/11649 on dynamically inserting components:

this isn't support, suspect won't require of htmlbars compiler client side , pretty slow. if wish add components dynamically. component helper may best bet.

on issue proposing use {{component}} helper, doesn't work code since want produce 2 component.

they talking rfc contextual components: https://github.com/emberjs/rfcs/pull/64#issuecomment-111761176 depending on implementation work similar you're doing. can do?

as far can tell it's not possible 1.13 (i tried quite number of things) because rerender doesn't work, going fix it. if downgrade 1.12 can do:

app.rendertemplatecomponent = ember.component.extend({   layout: function(){     return ember.handlebars.compile(this.get('templatestring'));   }.property('templatestring') }); 

then in template like:

{{render-template templatestring="test {{x-foo}} {{x-foo}}"}} 

take @ jsfiddle: http://emberjs.jsbin.com/jazayiyufi/1/edit?html,css,js,output