Привязка к строкам, содержащим пользовательские компоненты в Ember.js

Question

Я пытаюсь отобразить строку, вытащенную из моей модели, содержащую пользовательские компоненты ember. Похоже, что они не скомпилированы - см. (1) и (2) на выходе. Если я заменяю пользовательские компоненты на стандартные элементы html и использую синтаксис {{{}}} для привязки, все выглядит правильно (см. (3) и (4) на выходе), но этого недостаточно для приложения I Имейте в виду, однако. Как я могу получить ember для компиляции пользовательских компонентов перед их отображением?

app.js:

App = Ember.Application.create(); 

var g1 = "{{#my-bold}}Yo{{/my-bold}}, {{#my-italic}}dude{{/my-italic}}!"; 
var g2 = "<b>Yo</b>, <i>dude</i>!"; 

App.IndexRoute = Ember.Route.extend({ 
model: function() { 
    return {greeting1: g1, greeting2: g2} 
    }  
}); 

App.MyBoldComponent = Ember.Component.extend({tagName: "span"}); 

App.MyItalicComponent = Ember.Component.extend({tagName: "span"}); 

index.html

<script type="text/x-handlebars"> 
{{outlet}} 
</script> 

<script type="text/x-handlebars" id="components/my-bold"><b>{{yield}}</b></script> 
<script type="text/x-handlebars" id="components/my-italic"><i>{{yield}}</i></script> 

<script type="text/x-handlebars" id="index"> 
    <ol> 
    <li>{{model.greeting1}}</li> 
    <li>{{{model.greeting1}}}</li> 
    <li>{{{model.greeting2}}}</li> 
    <li>{{#my-bold}}Yo,{{/my-bold}} {{#my-italic}}dude!{{/my-italic}}</li> 
    </ol> 
</script> 

выход:

1. {{# мой-жирный}} {{Yo/мой-жирный}} , {{# my-italic}} чувак {{/ my-italic}}!
2. {{# my-bold}} Yo {{my-bold}}, {{# my-italic}} чувак {{my-italic}}!
3. Yo, чувак!
4. Yo, чувак!

Answer 1

Из ember.js отслеживания проблем https://github.com/emberjs/ember.js/issues/11649 динамически вставляя компонентов:

Это не то, что мы поддерживаем, я подозреваю, что мы не будем, поскольку это потребовало бы все клиента htmlbars компилятора и, вероятно, будет довольно медленным. Если вы хотите динамически добавлять компоненты. Помощник компонента может быть вашим лучшим выбором.

В этом выпуске они предлагают использовать вспомогательный помощник {{component}}, но это не работает с вашим кодом, так как вы действительно хотите создать два компонента.

Они также говорят о RFC для контекстных компонентов: https://github.com/emberjs/rfcs/pull/64#issuecomment-111761176, которые в зависимости от их реализации будут работать аналогично тому, что вы делаете. Так что ты можешь сделать?

Насколько я могу судить, это просто невозможно сделать с 1.13 (я пробовал немало вещей), потому что rerender не работает, но они исправят его. Если вы понижаем до 1.12 вы можете сделать:

App.RenderTemplateComponent = Ember.Component.extend({ 
    layout: function(){ 
    return Ember.Handlebars.compile(this.get('templateString')); 
    }.property('templateString') 
}); 

Тогда в вашем шаблоне что-то вроде:

{{render-template templateString="test {{x-foo}} {{x-foo}}"}} 

Взгляните на этот JSFiddle: http://emberjs.jsbin.com/jazayiyufi/1/edit?html,css,js,output