Proper way to use bind-attr with computed properties from model?


I’m wondering what is the proper way to use computed properties from a model in a view’s template? Consider the following:

App.Item = DS.Model.extend({
  imageDefault: DS.attr('string'),

  detailPic: function() {
    var url = this.get('imageDefault');
    var image = url.substr(url.lastIndexOf('/') + 1);
    var thumb = 'lg_' + image.substr(3);
    return url.replace(image, thumb);

 App.ItemDetailView = Em.View.extend({
   templateName: "itemDetail",
   //adt'l view logic...

And here is the template:

<script type="text/x-handlebars" data-template-name="itemDetail">
  <div class="row">
    <div class="pull-left item-detail-main-pic">
      <img {{bindAttr src="detailPic"}}>

    test: {{controller.model.detailPic}}


So with the code above the view “ItemDetailView” will retrieve the first item object selected from the ArrayController “Items” and properly compute the detailPic from imageDefault property. The img src bind-attr will reflect the correctly computed img src and the handlebars {{controller.model.detailPic}} will properly display the same link.

However, when another item from the ItemsController (ArrayController) is selected the

<img {{bindAttr src="detailPic"}}> 

will not update, but the test handlebars {{controller.model.detailPic}} in the view template WILL update.

I’ve tried the following variations with the same results.

<img bind-attr src=detailPic>

<img bind-attr src=controller.model.detailPic>

What is the proper way to use computed properties in models in view templates? Or should it be avoided?


Hey, anyone interested in this please see my stackoverflow question at:

I’m still currently trying to discover if using computed properties from a model in a view template, using “bind-attr” is an anti-pattern or if I’m just doing something wrong. Ember 1.0.0.


I also am having some issues with this, did you ever figure it out?


Yes! I didn’t write back because I was trying to figure out whether or not to report a bug on github.

I ended up wrapping my bind-attr helper within a handlebar {{if ‘detailPic’}} conditional??? Try it out and let me know if it works for you.

{{#if "detailPic"}}
    <img {{bind-attr src="detailPic"}}>