Помощник ручек для возврата разметки

У меня есть следующий очень простой помощник handlebars, который возвращает 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.

Возможно ли это с помощником handleabars?

Ответы

Ответ 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

и получите <img> из вашего {{avatarImg ...}}.

Ответ 2

Вы можете создать представление для представления этого тега изображения, а затем вызвать хелпер-представление handlebars из своего пользовательского помощника. Например:

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 helper. Чтобы увидеть более продвинутый пример, проверьте источник здесь: https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/helpers/link_to.js#L83