Question

我正在尝试显示一个从我的模型中拉出的包含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"});

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

输出：

{{＃my-bold}}哟{{my-bold}}，{{＃my-italic}} dude {{/ my-italic}}！
{{＃my-bold}}哟{{my-bold}}，{{＃my-italic}} dude {{/ my-italic}}！
哟，老兄！
哟，老兄！

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（我尝试了很多东西），因为重新渲染不起作用，但他们会修复它。如果你降级到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

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

1 个答案: