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

Solution

I believe what happens is that each {{{variable}}} is constructed independently and independently inserted into the DOM, which leads to unclosed DOM nodes that gets closed. The only way I can think of is to include the template compiler and recompile the template with bodyStart and bodyStop.

App.ContentWrappedComponent = Ember.Component.extend({
  startBody: '',
  endBody: '',
  layout: function(){
    return Ember.HTMLBars.compile(
      this.get('bodyStart') + 
      '{{yield}}' + 
      this.get('bodyEnd')
    );
  }.property('bodyStart', 'bodyEnd')
});

You also need to add to your Brocfile.js:

app.import('bower_components/ember/ember-template-compiler.js');

JSBin: http://emberjs.jsbin.com/ticituxapa/3/edit?html,css,js,output