我目前可以做以下事情:

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)

#1楼 票数:4 已采纳

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

  });
}

  ask by Ernesto translate from so

未解决问题?本站智能推荐:

1回复

Ember.js-无法呈现模型实例的'edit'.hbs。

我正在尝试{{#link-to}}特定模型实例的“ / edit”路由,“ category / 2”,使其成为“ category / 2 / edit”。 问题是,当我使用url“ category / 2 / edit”时,该页面保留在“ category / 2”页面上,除了模型中
1回复

将数据添加到Ember.js中的application.hbs模板

我正在尝试做一些应该很简单的事情,但是我要确保它甚至是可能的... 我想将数据添加到Ember.js的默认模板application.hbs ,例如在页脚中有当前日期。 我应该使用组件吗? 我试图通过index.js路由传递数据,但没有任何显示: 我的index.js :
1回复

Ember.js:将hbs中的null传递给组件

当您像这样在车把中将“ null”作为属性值传递时: 然后在组件中, myProperty的值不是预期的null ,而是undefined 。 所以首先,我认为它可以始终将所有未引用的字符串解释为(假设)控制器属性。 但是,如果您写: 它被解释为布尔值= true。
1回复

ember.js中.hbs和.hjs之间的区别

我不了解.hjs和.hbs之间的区别。 经过一些愚蠢的实验,我发现.hjs用于纯模板,.hbs用于部分模板。 有人可以指出我正确的方向吗?
2回复

ember.js hbs TextFieldView中的视图帮助器

我是ember.js的新手。 我有一个自定义视图助手: 我需要在TextField中应用此帮助程序: 我如何才能达到最佳效果?
1回复

Ember.js -Render在具有自己的控制器的单独目录中的模板

我不理解在另一个模板中呈现模板的正确方法。 我正在使用ember-cli 2.4.3。 我有我的route.js: 我的index.js中有我的插座: 到目前为止,这是我在index.js路由中的内容: 我试图引用的app/controllers/nodes/in
2回复

如何在Ember.js中呈现预编译的Handlebars模板?

直接使用车把: 但是,当使用带有Ember.js的预编译模板时,这将无法工作: 同样,如果使用Handlebars.compile编译模板,则不会从Ember对象正确读取属性,因为未调用get 。
1回复

无法获取要在Ember.js中呈现的模板部分

我在让Ember.js拾取并渲染车把模板文件时遇到一些问题。 我在浏览器的调试控制台中收到以下错误: 错误:<(Welcome.LoginView的子类):ember166>-无法找到模板“ login_view”。 我的app.js文件中的emberjs代码中包