灰燼，在動態模板中呈現內容

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