2

我想在 Ember 的客户端上在运行时动态编译（然后渲染）一个 HTMLBars 模板。我怎样才能做到这一点？

4

4 回答 4

5

这个答案现在已经过时了。请参阅我在上面接受的@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 版本中中断，具体取决于 Ember 模板编译过程如何随着Glimmer 2的出现而变化。

于 2016-05-20T11:06:44.957 回答
3

由于 Ember 2.10 现在使用 Glimmer，所以这里的事情可能有点棘手。为了编译模板，您需要将其包含ember-template-compiler.js到您的应用程序中。我建议使用ember-browserifyand 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}}现在，让我们使用helper在您的模板中施展魔法。

...

{{partial 'YOUR_TEMPLATE_NAME'}}

...

此方法在 Ember 2.13 中有效，没有弃用警告，它应该在未来的更新中有效。请注意，这Ember.TEMPLATES是全局变量，引擎似乎以某种方式对其进行缓存，因此不要将新值重新分配给现有变量。

于 2017-05-14T20:10:16.960 回答
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

于 2017-10-26T17:23:00.843 回答
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 时这不起作用的任何原因。

于 2017-01-16T04:54:11.860 回答