Javascript 余烬，在动态模板中呈现内容

我遇到了一个难题，就是如何在Ember v1.13.1中呈现一些动态HTML内容中的内容，这些内容是我无法控制的。在这个特定场景中，我从服务调用中获得导航头和导航脚，并将它们放在我的组件中：

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>',
});

我希望yield内容放在

元素中，但事实并非如此。相反，内容主体在

{{yield}

之前关闭，而bodyEnd closing div被忽略

我可能只是错过了一些明显的东西。任何关于如何解决这一问题的想法都将不胜感激

---

干杯

我相信每个

{{{{{variable}}}

都是独立构建的，并且独立插入到DOM中，这导致未关闭的DOM节点关闭。我能想到的唯一方法是包含模板编译器，并使用bodyStart和bodyStop重新编译模板

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

您还需要在Brocfile.js中添加以下内容：

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

---

JSBin:

太棒了，谢谢。这起作用令人惊讶。这对性能有影响吗？或者这基本上就是模板所做的吗？你不应该在前端编译把手，但我无法想象有什么不同的方法来解决这个问题。嗯，是的，我猜模板编译通常发生在构建时。。。谢谢

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