Ember 在运行时动态编译 HTMLBars 模板
Dynamically compile a HTMLBars template at runtime in Ember
我想在 Ember 中的客户端上在运行时动态编译(然后呈现)HTMLBars 模板。我该怎么做?
这个答案现在已经过时了。请参阅我在上面接受的@poohoka 的回答。
基于 Kingpin2K 对 的回答:
对于某些背景,回顾一下 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 的出现而发生的变化。
我目前在 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 时这不起作用。
由于 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 助手到您的自定义组件的任何内容,甚至是您的操作绑定。
例如
<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
是全局变量,引擎似乎以某种方式缓存了它,因此不要将新值重新分配给现有值。
自 Ember 2.13+(默认情况下没有凉亭)您需要添加 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>'
);
}),
});
基于另一个答案的解决方案
我想在 Ember 中的客户端上在运行时动态编译(然后呈现)HTMLBars 模板。我该怎么做?
这个答案现在已经过时了。请参阅我在上面接受的@poohoka 的回答。
基于 Kingpin2K 对
对于某些背景,回顾一下 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 的出现而发生的变化。
我目前在 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 时这不起作用。
由于 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 助手到您的自定义组件的任何内容,甚至是您的操作绑定。
例如
<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
是全局变量,引擎似乎以某种方式缓存了它,因此不要将新值重新分配给现有值。
自 Ember 2.13+(默认情况下没有凉亭)您需要添加 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>'
);
}),
});
基于另一个答案的解决方案