2013-01-21 16 views
10

Ich habe die folgende sehr einfache Lenker Helfer, die eine Bild-URL zurückgibt:Lenker Helfer zurück Markup

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' 

Was ich wie folgt verwenden:

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

Die oben genannten Arbeiten, aber was würde Ich mag zu tun ist, das gesamte img-Element zurückzugeben.

Ist das mit einem handleabars Helfer möglich?

Antwort

13

Vom fine manual (rechts unten):

Wenn Ihr Helfer HTML zurückgibt, die Sie wollen nicht entkommen, stellen Sie sicher, ein neues Handlebars.SafeString zurückzukehren.

Also, wenn Sie möchten, dass Ihre Helfer ein voll ausgebildetes <img> Element zurück, dann Ihr HTML-String bauen und wickeln Sie es in einem Handlebars.SafeString:

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

und dann in der Vorlage sollten Sie in der Lage sein zu haben :

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

und eine <img> aus Ihrem {{avatarImg ...}} bekommen.

+0

Wenn jemand sich fragt, heißt die Escape-Funktion 'Handlebars.Utils.escapeExpression' – Kaworu

2

Sie können eine Ansicht erstellen, die das Bild-Tag darstellt, und anschließend den Helper des Lenkers aufrufen, der sich in Ihrem benutzerdefinierten Helfer befindet. Zum Beispiel:

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

}); 

ich ein funktionierendes Beispiel hier gepostet haben: http://jsbin.com/adewot/1/edit

Dies basiert auf der eigenen linkto Helfer Werke Weg ember. Um ein fortgeschritteneres Beispiel zu sehen, sieh dir die Quelle hier an: https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/helpers/link_to.js#L83