0

ビューのテンプレートでモデルから計算されたプロパティを使用する適切な方法は何ですか? 次の点を考慮してください。

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

ビューテンプレートのモデルで計算されたプロパティを使用する適切な方法は何ですか? それとも避けるべきですか？

4

1 に答える 1

0

テスト{{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>
于 2013-09-10T01:22:44.303 に答える