Ember js从模型计算属性到视图模板？

Question

我想知道在视图模板中使用模型计算属性的正确方法是什么？考虑以下几点：

///
//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...
 });

这是模板：

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

因此，使用上面的代码，视图“ItemDetailView”将检索从 ArrayController“Items”中选择的第一个项目对象，并从 imageDefault 属性正确计算 detailPic。 img src bind-attr 将反映正确计算的 img src 并且把手 {{controller.model.detailPic}} 将正确显示相同的链接。

但是，当从 ItemsController (ArrayController) 中选择另一个项目时，

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

不会更新，但视图模板中的测试把手 {{controller.model.detailPic}} 会更新。

我尝试了以下变体，结果相同。

//
<img bind-attr src=detailPic>

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

在视图模板的模型中使用计算属性的正确方法是什么？还是应该避免？

Answer 1

由于测试 {{controller.model.detailPic}} 有效，请尝试改用该路径：

<img {{bindAttr src="controller.model.detailPic"}}>

同样令人惊讶的是，测试 {{controller.model.detailPic}} 有效但 {{detailPic}} 无效。在大多数模板中，controller 是多余的，因为控制器已经是模板的上下文。然后（假设控制器是 ObjectController）.model 也将是多余的，因为 detailPic 属性将只是通过代理。从同一个模板尝试以下测试，看看发生了什么：

<pre>
this: {{this}}
controller: {{controller}}
controller.model {{controller.model}}
detailPic: {{detailPic}}
controller.detailPic: {{controller.detailPic}}
controller.model.detailPic: {{controller.model.detailPic}}
</pre>