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

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}}伙计{{/my-italic}}！
{{#my-bold}}哟{{/my-bold}}，{{#my-italic}}伙计{{/my-italic}}！
哟, 伙计!
哟, 伙计!

Answer 1

来自 Ember.js 问题跟踪器 https://github.com/emberjs/ember.js/issues/11649 关于动态插入组件的内容：

This isn't something we support, I also suspect we won't as it would require all of the htmlbars compiler client side and would likely be pretty slow. If you wish to add components dynamically. The component helper may be your best bet.

在这个问题上，他们提议使用 {{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 中包含自定义组件的字符串

Binding to strings containing custom components in Ember.js

javascript

custom-component

handlebars.js

ember.js