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

Question

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

Answer 1

由于Ember2.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助手到您的自定义组件，甚至您的操作绑定。

例如：

<ul>
  <li>{{#link-to 'index'}}Home{{/link-to}}</li>
</ul>
<div {{action 'yourCustomAction'}}>
  {{your-custom-component params=yourCustomParams model=model flag=true}}
</div>

现在，让我们通过使用{{partial}}助手来实现模板中的魔力。

...

{{partial 'YOUR_TEMPLATE_NAME'}}

...

此方法在Ember 2.13中工作，无需警告，应在以后的更新中使用。请注意，Ember.TEMPLATES是全局变量，引擎似乎以某种方式缓存它，所以不要将新值重新分配到现有值。

Answer 2

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

基于Kingpin2K对使用HTMLbars在ember中编译模板客户端的回答

对于一些背景，返回到用Ember 1.10编译模板可能是有用的。我们仍然需要加载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>'
    );
  }),

});

这个解决方案很可能会破坏Ember的未来关系，这取决于随着微光2的出现，Ember模板编译过程是如何变化的。

Answer 3

由于Ember 2.13+ (默认情况下没有保龄球)，您需要在成员-cli-build.js中添加：

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

对于2.10之前的Ember版本，您需要通过bower (也是在成员-cli-build.js上)包含它。

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

关于你需要的代码：

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

在hbs文件调用中：

{{partial 'mycompiledcode'}}

或者你可以做这样的组件：

import Ember from 'ember';

export default Ember.Component.extend({

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

});

基于另一个答案https://stackoverflow.com/a/37345099/6505594的解决方案