Einfügen einer Modelleigenschaft in eine Img Element URL in Ember

Question

Ich habe ein Modell mit einer image_id Eigenschaft. Ich habe eine Ansicht für dieses Modell, die ein Bildelement enthält. Ich brauche die ID in das Bildelement des src Eigenschaft legen Sie die URL des Bildes zu vervollständigen, so dass ich dies effektiv zu tun habe:

<img src="news + newsItem.imageID + .jpg"></img> 

Mein erster Versuch verwendet, um einen Lenker Helfer:

<img src="news{{newsImageURL newsItem.imageID}}.jpg"></img> 

aber diese auch Metamprph eingefügt Script-Tags um ihn herum:

<img url="&lt;script id='metamorph-10-start' type='text/x-placeholder'&gt;&lt;/script&gt;news/7.jpg&lt;script id='metamorph-10-end' type='text/x-placeholder'&gt;&lt;/script&gt;" alt="" class="content-image news-media" /></a> 

Also bei ich habe sah bindAttr verwenden, aber als ich den image_id Wert zu transformieren müssen (indem man den Rest des Weges vorwegnimmt und anfügt, scheint dies auch keine Lösung zu sein.

Answer 1

Es gibt 2 Möglichkeiten:

1- Deklarieren Sie den Bildpfad als berechnete Eigenschaft auf Ihrem Modell. Wenn Sie wie das nicht tun, könnten Sie es erklären auch in Ihrer ObjectController diese Vorlage sichern:

Die Vorlage:

// until 1.0 RC7 
<img {{bindAttr src="newsItem.imagePath"}}></img> 
// from 1.0 final (the above one is deprecated) 
<img {{bind-attr src=newsItem.imagePath}}></img> 

Das Modell:

App.NewsItem = DS.Model.extend({ 
    imageID: DS.attr('string'), 
    imagePath: function() { 
    return "/assets/news/"+this.get("imageID")+".jpg"; 
    }.property('imageID') 
}); 

2- Wenn Sie Ich brauche nicht die Bindung in 1 (ich denke, Ihre ID wird sich nicht ändern) und verwenden Sie die unbound helper, die nicht zu Skript-Tags führt:

<img src="news{{unbound newsItem.imageID}}.jpg"></img> 

Answer 2

Sie können bindAttr eine berechnete Eigenschaft referenzieren und dort Ihre Zeichenfolge erstellen.