Ember, рендеринг содержимого в динамическом шаблоне

Question

Я столкнулся с кирпичной стеной с тем, как визуализировать содержимое внутри некоторого динамического содержимого HTML, которое я не контролирую, с Ember v1.13.1. В данном конкретном случае, я получаю навигационную голову и навигационную ногу от вызова службы и положить их в моем компоненте:

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}}} 

Я ожидал бы содержание выход для размещения внутри <div class="contentBody"> элемента, но это не так. Вместо этого тело содержимого закрывается до {{yield}}, а закрывающий div bodyEnd игнорируется.

Возможно, мне просто не хватает чего-то очевидного. Любые идеи о том, как решить эту проблему, будут очень признательны.

Приветствие

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