繁体   English   中英

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

Render ember.js .hbs template to a string

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我目前可以做以下事情:

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 个回复

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

  });
}
1 Ember.js模板渲染

我可能读错了文档。 有人可以检查我的要旨并告诉我为什么invoices/index模板没有显示吗? 当我阅读ember.js文档时,它说应该渲染 (在我的情况下为invoices/index )。 但是, invoices模板将呈现。 把手: JavaScript ...

2013-03-05 01:25:19 1 1983   ember.js
2 在自己的ember.js上渲染模板

如何在不将模板放入父模板的情况下呈现模板。 例如,我需要呈现登录模板,但是我不希望它位于索引模板中。 因此,我希望登录模板独立存在。 这可能吗? ...

3 在Ember渲染.hbs模板

我正在看一个Ember演示项目https://github.com/kagemusha/ember-rails-devise-demo ,它使用了.hbs中的模板。 通常在Ember中,您通过附加例如对于about路线的id='about'来声明模板。 但是,在此项目中以.hbs结尾的所有模 ...

5 在Ember.js中渲染动态模板

我是Ember的新手,所以这可能是一个愚蠢的问题,但请忍受。 有一个特定的原因不能使用动态字符串呈现模板吗? 具体来说,我将各种对象推入控制器变量,如下所示: 然后尝试渲染它们: 这在Ember中不能正常使用,因为它需要一个字符串作为模板。 我只是在renderHelper ...

7 Ember.js查看/渲染/部分/模板?

我正在使用fixtureadapter并具有以下模型: 在把手文件中有这样的东西的最佳方法是什么: {{poll user = 1}}或{{poll id = 32}} 这将使用问题文本+项目呈现(用户的最新民意调查或)民意调查。 ...

2014-02-14 11:43:21 1 1495   ember.js
8 Ember模板将功能渲染为字符串

我是ember的新手,但模板有问题。 我的路线 我的控制器 模板 {{greeting}}正确呈现。 但是{{contentLength}}被渲染为字符串函数。 谁能帮助我解决这个问题? 谢谢 ...

9 在Ember.JS中绑定HTML字符串

我正在使用第三方索引服务(Swiftype)来搜索我的数据库。 返回的记录包含一个名为highlight的属性。 这只是在匹配字符串周围添加&lt;em&gt;标记。 然后我将这个highlight属性绑定在Ember.JS Handlebars中: 这导致以下输出: ...

10 通过Ember.js中的字符串动态调用组件

我想通过字符串调用组件。 原因是我在数据库上有一个文本,并且在该文本内有一些我想调用的键,以防它们在我的应用程序中列出。 我知道有一个{{component}}助手可以动态调用组件,我想知道是否可以在这里使用它。 我将发布的示例很简单,但是其思想是使用更复杂的组件,例如ember-li ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM