使用HTMLbars编译模板客户端 [英] Compile template client side in ember using HTMLbars

问题描述

我已经创建了一个CMS，可以使用HTMLbars创建模板。模板应该是客户端编译的，应该显示模板的组件。我将组件的模板属性设置为使用HTMLBars返回编译模板的函数。

I have created a CMS where it is be possible to use HTMLbars to create templates. The templates should be compiled client side and there is component that should display the template. I'm setting the template property of the component to a function that returns the compiled template using 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。

I've included the ember-template-compiler in my Brocfile.

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

还测试

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

但是模板永远不会呈现。

But the template is never rendered.

推荐答案

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

It should be a property, and on a component it should be layout, but it will only be evaluated once, so updating the content won't rebuild the template.

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()
});

模板内容更改时，Rerender：

Rerender when template content changes:

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编译模板客户端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！