我创建了一个CMS,可以使用HTMLbars来创建模板。模板应该在客户端编译,并且应该有显示模板的组件。我将组件的template属性设置为一个函数,该函数使用HTMLBars返回编译后的模板。
import Ember from 'ember';
export default Ember.Component.extend({
content: null,
template: function () {
return Ember.HTMLBars.compile(this.get('content.template'));
}
}
我已经在我的Brocfile中包含了ember-template-compiler。
app.import('bower_components/ember/ember-template-compiler.js');
还测试了
app.import('bower_components/ember-template-compiler/index.js');
它应该是一个属性,在组件上应该是layout
,但是它只会被求值一次,所以更新内容不会重新构建模板。
http://emberjs.jsbin.com/vayereqapo/1/edit?html、js、输出
Ember.Component.extend({
content: {template: 'Hello'},
layout: function () {
return Ember.HTMLBars.compile(this.get('content.template'));
}.property()
});
模板内容改变时呈现:
App.FooBarComponent = Ember.Component.extend({
content: {template: 'Hello'},
foo: function(){
var self = this;
Em.run.later(function(){
self.set('content.template', 'Bye');
self.rerender();
}, 3000);
}.on('init'),
layout: function () {
return Ember.HTMLBars.compile(this.get('content.template'));
}.property('content.template')
});
http://emberjs.jsbin.com/qebuxuxasu/1/edit