使用 HTMLbars 在 ember 中编译模板客户端

Question

我创建了一个 CMS，可以在其中使用 HTMLbars 创建模板。模板应该在客户端编译，并且有一个组件应该显示模板。我正在将组件的模板属性设置为 returns 使用 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');

但模板从未呈现。

Answer 1

它应该是一个属性，在一个组件上它应该是 layout，但它只会被评估一次，所以更新内容不会重建模板。

http://emberjs.jsbin.com/vayereqapo/1/edit?html,js,output

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

使用 HTMLbars 在 ember 中编译模板客户端

Compile template client side in ember using HTMLbars

ember.js

htmlbars