将ember.js .hbs模板渲染为字符串

Question

我目前可以做以下事情：

var template = Handlebars.compile("Hello <em>{{name}}</em>!");
var html = template({ name: 'World' });

html变量现在保存字符串"Hello <em>World</em>!" 。

但是如何使用代码位于app/templates目录中的.hbs文件中的app/templates呢？

（我正在使用ember-cli和ember 1.9.1）

Answer 1

在Ember 1.13.15中，这将起作用（ UPDATE与底部的v2.4一起使用）：

// template-to-string.js
import Ember from 'ember';

export default function(container, template, context) {
  let resolvedTemplate =
    typeof template === 'string' ? container.lookup('template:' + template) : template;
  context = context || {};

  Ember.assert(`Template '${template}' could not be resolved`, !!template);

  return new Ember.RSVP.Promise((resolve) => {

    Ember.Component.create(Ember.merge({
      style: 'display:none;',
      layout: resolvedTemplate,
      container,

      didRender() {
        resolve(this.$().html());
        this.destroy();
      }
    }, context)).append();

  });
}

它基于这篇文章中提出的解决方案： 如何在Ember 2.0中将HTMLBars模板渲染为字符串？ 在哪里提供进一步的解释。

我已经扩展到支持传递模板上下文。

使用这样的功能：

// my-component.js
import Ember from 'ember';
import templateToString from './template-to-string';

export default Ember.Component.extend({

  _appendMyChildTemplate() {
    let myTemplateContext = ...;

    templateToString(this.container, '<my-template-path>', myTemplateContext)
     .then((html) => {
       this.$().append(html);
     });
  }

})

更新到Ember 2.4：

我不能声称完全理解这个或它是最接近最佳解决方案，但它的工作:)

与上述功能没有太大差别：

import Ember from 'ember';

export default function(container, template, context) {
  let resolvedTemplate =
    typeof template === 'string' ? container.lookup('template:' + template) : template;
  context = context || {};

  Ember.assert(`Template '${template}' could not be resolved`, !!template);

  return new Ember.RSVP.Promise((resolve) => {

    Ember.Component.extend(Ember.merge({
      style: 'display:none;',
      layout: resolvedTemplate,
      container,

      init() {
        this._super.apply(this, arguments);
        Ember.setOwner(this, container);
      },

      didRender() {
        resolve(this.$().html());
        this.destroy();
      }
    }, context))
      .create()
      .append();

  });
}