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

  });
}