Javascript 绑定到Ember.js中包含自定义组件的字符串

我试图显示一个从模型中提取的字符串，其中包含ember自定义组件。但它们似乎没有被编译——请参见输出中的（1）和（2）。如果我用标准html元素替换自定义组件，并使用{{{-}}}语法进行绑定，事情看起来是对的（请参见输出中的（3）和（4）），但这对于我所想到的应用程序来说还不够。如何让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"});

App=Ember.Application.create（）；
var g1=“{{{{我的粗体}}哟{{/我的粗体}}，{{{{我的斜体}}都德{{/我的斜体}！”；
var g2=“哟，伙计！”；
App.IndexRoute=Ember.Route.extend（{
模型：函数（）{
返回{greeting1:g1，greeting2:g2}
}    
});
App.MyBoldComponent=Ember.Component.extend（{标记名：“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>

{{outlet}}
{{yield}}
{{yield}}
{{model.greeting1}}
{{{model.greeting1}}}
{{{model.greeting2}}}
{{{{我的黑体}}哟，{{/我的黑体}{{{{我的斜体}哥们！{{/my italic}}

输出：

{{{{我的黑体}}哟{{/我的黑体}，{{{{我的斜体}哥们{{/我的斜体}

{{{{我的黑体}}哟{{/我的黑体}，{{{{我的斜体}哥们{{/我的斜体}

哟，伙计

哟，伙计

---

从Ember.js问题跟踪器动态插入组件：

这不是我们所支持的，我也怀疑我们不会支持，因为它需要所有的htmlbars编译器客户端，而且可能会非常慢。如果您希望动态添加组件。组件助手可能是您的最佳选择

在这个问题上，他们建议使用

{{component}

助手，但这不适用于您的代码，因为您实际上想要生成两个组件

他们还讨论了上下文组件的RFC：根据它们的实现，RFC的工作原理与您正在做的类似。那你能做什么呢

据我所知，使用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}}"}}

看看这个JSFIDLE：