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

Question

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

因此，在组件模板中，我正在尝试执行以下操作：

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

我希望将yield内容放置在<div class="contentBody">元素内，但事实并非如此。 而是在{{yield}}之前关闭内容主体，并忽略bodyEnd关闭div。

我可能会遗漏一些明显的东西。 任何有关如何解决此问题的想法将不胜感激。

干杯

Answer 1

我相信发生的事情是每个{{{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： http ://emberjs.jsbin.com/ticituxapa/3/edit?html,css,js,output