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>

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

1 个答案: