Handlebars सहायक मार्कअप

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 तत्व वापस आ गया है।

क्या यह एक हैंडलबार्स सहायक के साथ संभव है?

Answer 1

fine manual (सही नीचे) से

:

अपने सहायक एचटीएमएल है कि आप बच गए नहीं करना चाहते देता है, तो एक नया 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 ...}} से बाहर निकलना।

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

इस तरह एंबर की अपनी linkTo सहायक काम करता है पर आधारित है। एक और उन्नत उदाहरण देखने के लिए यहां स्रोत देखें: https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/helpers/link_to.js#L83