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

时间:2016-05-20 11:06:45

标签: templates ember.js compilation htmlbars

我想在运行时在Ember的客户端上动态编译(然后渲染)HTMLBars模板。我怎么能这样做?

4 个答案:

答案 0 :(得分:5)

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

建立Kingpin2K对Compile template client side in ember using HTMLbars的回答:

对于某些背景,回顾Compiling Templates with 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的重复中中断,具体取决于Ember模板编译过程随Glimmer 2的出现而变化的方式。

答案 1 :(得分:3)

由于Ember 2.10现在正在使用Glimmer,这里的事情可能有点棘手。要编译模板,您需要在应用程序中包含ember-template-compiler.js。我建议您使用ember-browserifyember-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助手到自定义组件的任何内容,甚至是您的动作绑定。

e.g。

<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是全局变量,引擎似乎以某种方式缓存它,因此不要将新值重新分配给现有值。

答案 2 :(得分:3)

自Ember 2.13+(默认情况下没有bower)你需要添加你的ember-cli-build.js:

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

对于2.10之前的Ember版本,您需要通过bower(也在ember-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

答案 3 :(得分:1)

我目前使用的是Ember-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时这不会起作用。