ember.js - ember - handlebars js

Handlebars helper para devolver el marcado

Question

Tengo el siguiente asistente de manubrio muy simple que devuelve una url de imagen:

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''

Que uso así:

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

Lo anterior funciona, pero lo que me gustaría hacer es devolver todo el elemento img.

¿Es esto posible con un ayudante de barras de mano?

Answer 1

Del fino manual (justo en la parte inferior):

Si su ayudante devuelve HTML que no desea que se escape, asegúrese de devolver un nuevo Handlebars.SafeString .

Entonces, si quieres que tu ayudante devuelva un elemento <img> completamente formado, construye tu cadena HTML y envuélvela en un Handlebars.SafeString :

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

y luego en tu plantilla deberías poder tener:

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

y obtenga un <img> de su {{avatarImg ...}} .

Answer 2

Puede crear una vista para representar esa etiqueta de imagen y luego llamar a handlebars view helper desde su ayuda personalizada. Por ejemplo:

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

});

He publicado un ejemplo de trabajo aquí: http://jsbin.com/adewot/1/edit

Esto se basa en la forma en que funciona el enlace al auxiliar de ember. Para ver un ejemplo más avanzado, consulte la fuente aquí: https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/helpers/link_to.js#L83