10

我有以下非常简单的车把助手，它返回一个图像 url：

Ember.Handlebars.registerHelper 'avatarUrl', (property, options) ->
  if value = Ember.get(this, property)
    if small_url = value.small_url
      return small_url

  '/images/fallback/small_default.png'

我这样使用：

<img src="{{avatarUrl avatar}}" title="displayName">

以上工作，但我想做的是返回整个 img 元素。

车把助手可以做到这一点吗？

4

3 回答 3

14

来自精美手册（位于底部）：

如果您的助手返回您不想转义的 HTML，请确保返回一个新的Handlebars.SafeString.

因此，如果您希望您的助手返回一个完全形成的<img>元素，然后构建您的 HTML 字符串并将其包装在 a 中Handlebars.SafeString：

Ember.Handlebars.registerHelper 'avatarImg', (property, options) ->
  # Build your <img> HTML string and leave it in result ...
  new Handlebars.SafeString(result)

然后在您的模板中，您应该能够拥有：

blah blah {{avatarImg ...}} blah blah

并<img>从你的{{avatarImg ...}}.

于 2013-01-21T23:33:27.237 回答
2

您可以创建一个视图来表示该图像标签，然后从您的自定义助手中调用把手视图助手。例如：

App.AvatarView = Ember.View.extend({
  tagName: 'img',
  attributeBindings: ['src']
});

Ember.Handlebars.registerHelper('avatarUrl', function(property, options) {
  var small_url, value;
  value = Ember.get(this, 'avatarUrl');
  if (value) {
    small_url = value.small_url;
  }
  var hash = options.hash;
  hash.src = small_url || '/images/fallback/small_default.png';

  Ember.Handlebars.helpers.view.call(this, App.AvatarView, options);

});

我在这里发布了一个工作示例：http: //jsbin.com/adewot/1/edit

这是基于 ember 自己的 linkTo 助手的工作方式。要查看更高级的示例，请查看此处的源代码：https ://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/helpers/link_to.js#L83

于 2013-01-21T23:57:15.327 回答
2

import { htmlSafe } from '@ember/string';对于 Ember 3 https://guides.emberjs.com/v3.0.0/templates/writing-helpers/#toc_escaping-html-content

safeString在 2.8.0 中已弃用并在 3.0.0 中删除 https://emberjs.com/deprecations/v2.x/#toc_use-ember-string-htmlsafe-over-ember-handlebars-safestring

于 2018-04-27T05:14:00.717 回答