把手助手返回標記

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（右底部）：

如果你的助手返回你不想逃脫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 ...}}的。

Answer 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幫手作品。要查看更高級的示例，請查看此處的源代碼：https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/helpers/link_to.js#L83