Binding to strings containing custom components in Ember.js

I'm trying to display a string, pulled from my model, that contains ember custom components. They don't seem to get compiled though -- see (1) and (2) in the output. If I replace the custom components with standard html elements and use the {{{-}}} syntax for binding, things look right (see (3) and (4) in the output), but this is not sufficient for the application I have in mind, though. How can I get ember to compile the 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!