Chèn Thuộc tính Mô hình vào URL Phần tử Img trong Ember

Question

Tôi có Mô hình với thuộc tính image_id. Tôi có Chế độ xem cho Mô hình đó chứa phần tử hình ảnh. Tôi cần phải chèn id vào bất động sản src các yếu tố hình ảnh để hoàn thành URL của hình ảnh vì vậy mà tôi đang có hiệu quả làm điều này:

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

nỗ lực đầu tiên của tôi sử dụng một helper tay lái:

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

nhưng điều này cũng chèn thẻ script Metamprph xung quanh nó:

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

vì vậy, tôi đã xem xét sử dụng bindAttr, tuy nhiên như tôi cần phải thay đổi giá trị image_id (bằng cách thêm và thêm phần còn lại của đường dẫn), điều này dường như không phải là giải pháp.

Answer 1

Có 2 khả năng:

1- Khai báo con đường hình ảnh như tài sản tính theo mô hình của bạn. Nếu bạn không thích điều đó, bạn có thể khai báo nó cũng trong ObjectController bạn ủng hộ mẫu này:

Template:

// 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> 

Model:

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

2- Nếu bạn không cần sự ràng buộc trong 1 (tôi đoán id của bạn sẽ không thay đổi) và sử dụng các unbound helper, mà không dẫn đến thẻ script:

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

Answer 2

Bạn có thể đặt tham chiếu bindAttr thành thuộc tính được tính toán và tạo chuỗi của bạn ở đó.