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

Design
1

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

///
//MODEL//
////////////////////////////
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);
  }.property('imageDefault'),
  });

 ///
 //VIEW//
 //////////////////////////////////////
 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"}}>
    </div>

    test: {{controller.model.detailPic}}

</script>

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?

2

Hey, anyone interested in this please see my stackoverflow question at: ember.js - Ember js computed properties from model to view template? - Stack Overflow

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.

3

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

4

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"}}>
{{/if}}

Thanks!