Templates 在Ember中运行时动态编译HTMLBars模板

我希望在运行时在Ember中的客户端上动态编译（然后呈现）HTMLBars模板。我该怎么做呢？

这个答案现在已经过时了。请看@poohoka的答案，我已经接受了上面的答案

---

基于Kingpin2K对以下问题的回答：

对于一些背景知识，可以回头参考。我们仍然需要加载

ember template compiler.js

。加

  app.import('bower_components/ember/ember-template-compiler.js');

到您的

ember cli build.js

然后您可以编写如下组件：

import Ember from 'ember';

export default Ember.Component.extend({

  layout: Ember.computed(function() {
    return Ember.HTMLBars.compile(
      '{{foo-bar}} <span>' + 'hello' + '</span>'
    );
  }),

});

import Ember from 'ember';

export default Ember.Component.extend({

  layout: Ember.computed(function() {
    return Ember.HTMLBars.compile(
      '{{foo-bar}} <span>' + 'hello' + '</span>'
    );
  }),

});

从“余烬”导入余烬；
导出默认的Ember.Component.extend({
布局：Ember.computed（函数（）{
返回Ember.htmlbar.compile(
{{foo bar}}+'你好'+''
);
}),
});

---

这个解决方案很可能会在未来的余烬版本中有所突破，这取决于余烬模板编译过程如何随着新版本的出现而改变。

我目前使用的是余烬-2.9.x，我用我的

bower.json

带来了最新的手柄：

"handlebars": "^4.0.0"

然后通过我的

ember cli build.js

文件添加它：

app.import('bower_components/handlebars/handlebars.js');

---

这对我的

typeahead

组件起到了作用，我看不出在升级到带有Glimmer2的Ember-2.10时这有什么原因不起作用。

由于Ember 2.10现在使用Glimmer，这里可能有点棘手。为了编译模板，您需要在应用程序中包含

ember template compiler.js

。我建议使用

ember-browserify

和

ember-source

在控制器中，按如下方式导入编译器

import Ember from 'ember';
import Compiler from 'npm:ember-source/dist/ember-template-compiler';

export default Ember.Controller.extend({
  compileContent() {
    const template = Compiler.compile(this.get('dynamicContent'));
    Ember.TEMPLATES[`YOUR_TEMPLATE_NAME`] = template;
  },
  // we observe content changes here
  contentDidUpdate: Ember.observer('dynamicContent', function() {
    this.compileContent();
  }),
});

经过测试，您的内容可以包含任何内容，从Ember Helper到自定义组件，甚至是动作绑定

e、 g

此方法在Ember 2.13中工作，没有弃用警告，它应该在将来的更新中工作。请注意，

Ember.TEMPLATES

是全局变量，引擎似乎会以某种方式缓存它，因此不要将新值重新分配给现有值。

因为Ember 2.13+（默认情况下没有bower），您需要添加到您的Ember-cli-build.js中：

app.import('vendor/ember/ember-template-compiler.js');

对于2.10之前的Ember版本，您需要通过

bower

（也在Ember cli build.js上）将其包括在内

在代码上，您需要：

Ember.TEMPLATES['mycompiledcode'] = Ember.HTMLBars.compile('{{foo-bar}} <span>' + 'hello' + '</span>');

或者，您可以制作如下组件：

import Ember from 'ember';

export default Ember.Component.extend({

  layout: Ember.computed(function() {
    return Ember.HTMLBars.compile(
      '{{foo-bar}} <span>' + 'hello' + '</span>'
    );
  }),

});

import Ember from 'ember';

export default Ember.Component.extend({

  layout: Ember.computed(function() {
    return Ember.HTMLBars.compile(
      '{{foo-bar}} <span>' + 'hello' + '</span>'
    );
  }),

});

从“余烬”导入余烬；
导出默认的Ember.Component.extend({
布局：Ember.computed（函数（）{
返回Ember.htmlbar.compile(
{{foo bar}}+'你好'+''
);
}),
});

基于另一个答案的解决方案

{{partial 'mycompiledcode'}}

import Ember from 'ember';

export default Ember.Component.extend({

  layout: Ember.computed(function() {
    return Ember.HTMLBars.compile(
      '{{foo-bar}} <span>' + 'hello' + '</span>'
    );
  }),

});