Handlebars helper to return markup

Question

I have the following very simple handlebars helper that returns an image 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'

Which I use like this:

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

The above works but what I would like to do is return the entire img element.

Is this possible with a handleabars helper?

Answer 1

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

safeString was deprecated in 2.8.0 and removed with 3.0.0 https://emberjs.com/deprecations/v2.x/#toc_use-ember-string-htmlsafe-over-ember-handlebars-safestring

Answer 2

From the fine manual (right at the bottom):

If your helper returns HTML that you do not want escaped, make sure to return a new Handlebars.SafeString.

So if you want your helper to return a fully formed <img> element, then build your HTML string and wrap it in a Handlebars.SafeString:

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

and then in your template you should be able to have:

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

and get an <img> out of your {{avatarImg ...}}.

Answer 3

You can create a view to represent that image tag and then call handlebars view helper from within your custom helper. For example:

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

});

I've posted a working example here: http://jsbin.com/adewot/1/edit

This is based on the way ember's own linkTo helper works. To see a more advanced example check out the source here: https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/helpers/link_to.js#L83