2013-09-23 28 views
4

我想設置一個鏈接樣式的助手,但不太明白如何。燼:如何設置鏈接到綁定attr?

我有以下型號:

App.ArtistFavorite = DS.Model.extend 
    name: DS.attr 'string' 
    image_url: DS.attr 'string' 

我的模板:

li 
    link-to 'artistFavorite' this {bind-attr style="background-image: url('image-url');"} 

但捆紮ATTR似乎並沒有工作

BTW:我使用emblemjs和coffeescript

回答

3

link-to是一個Ember的視圖幫手,所以(靈感來自this)我本來要建議using attributeBindings,除了會引發以下JS錯誤:

Setting 'attributeBindings' via Handlebars is not allowed. Please subclass Ember.View and set it there instead.

它看起來就像如果你真的需要用這種方式來設置屬性,可以通過reopeningEmber.LinkView類這樣做並在那裏設置attributeBindings,但應預先警告,這會影響您網頁上的每個link-to

但是,如果(如出現的話)的唯一屬性,你需要設置爲style,你可以創建一個CSS類與所需的樣式,然後設置classNames,爲討論here,即:

{{#link-to 'artistFavorite' this classNames="your-class-name"}} 

從代碼風格的角度來看,即使可以(更容易)直接設置style屬性,我也會採用這種方法。


編輯只是意識到你正在嘗試單獨設置樣式使用相應項目的屬性之一的各個環節,所以很明顯的CSS類是行不通的。儘管如此,我還是想過這個。

雖然氣餒,你應該能夠通過重新打開LinkView類,並添加styleattributeBindings綁定到style屬性:

Ember.LinkView.reopen({ 
    attributeBindings: ["style"] 
}) 

然後可能你可以設置爲style屬性的值:

{{#link-to 'artistFavorite' this style=favStyle}} 

其中favStyle是您的模型或(理想情況下)您的公司的計算屬性ntroller:

favStyle: function() { 
    return "background-image: url('" + this.get('image_url') + "');"; 
}.property('image_url') 

但是我沒有測試過這一點,我不是100%肯定的結合將正常運行這種方式,因爲這些綁定通常用於純文本,而不是屬性。