把手幫助返回標記

Question

我有以下非常簡單的把手助手，它返回一個圖片網址：

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元素。

這是否可以使用handleabars幫助器？

Answer 1

從精細的手冊 （在底部）：

如果您的助手返回您不想轉義的HTML，請確保返回新的Handlebars.SafeString 。

因此，如果您希望助手返回完全形成的<img>元素，那么構建HTML字符串並將其包裝在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

從你的{{avatarImg ...}}獲取<img> 。

Answer 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

Answer 3

import { htmlSafe } from '@ember/string'; for 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