Ember, rendering content in a dynamic template

I'm running into a bit of a brick wall with how to render content inside some dynamic HTML content which I don't control, with Ember v1.13.1. In this particular scenario, I'm getting a navigation head, and navigation foot from a service call and putting them in my component:

export default Ember.Component.extend({
  // I don't control these. They come from somewhere else
  bodyStart: '<div class="header">...</div><div class="contentBody">',
  bodyEnd: '</div><footer>...</footer>',
});

So, in my component template, I'm trying to do something like:

{{{bodyStart}}}
{{yield}}
{{{bodyEnd}}}

I would expect the yield content to be placed inside a <div class="contentBody"> element, but it's not. Instead content body is closed before the {{yield}}, and the bodyEnd closing div is ignored.

It's possible I'm just missing something obvious. Any ideas on how to solve this would be greatly appreciated.

Cheers