OnClick model.firstObjectデータを変更する

Question

1. 私は、左側にliタグのデータを表示するモデルを持っています。

2. 右側に

   model.firstObjectディスプレイの1

3. ユーザーは、現在のliタグをクリックすると、私は現在のliデータを表示するには、右サイドmodel.firstObjectを変更したいと思います。

このようなものを処理するにはどうすればよいでしょうか？

<div class="food-menu"> 
    <ul class="menu-list"> 
     {{#each model as |menu|}} 
     <li class="menu selectable {{if (eq menu model.firstObject) 'active'}}"> 
      <div class="picture-wrapper"> 
      <img src="{{menu.picture}}" alt=""> 
      </div> 
      <div class="info-box"> 
      <h2 class="name">{{menu.name}}</h2> 
       <p class="light-blue title-company"> 
       {{menu.lowfat}} 
      </p> 
      </div> 
     </li> 
     {{/each}} 
    </ul> 
    </div> 
    <div class="menu-detail"> 
    {{#with model.firstObject as |menu|}} 
     <div class="menu menu-banner"> 
     <div class="picture-wrapper"> 
      <img src="{{menu.picture}}" alt=""> 
     </div> 
     <div class="info-box"> 
      <h2 class="light name">{{menu.name}}</h2> 
      <p class="light-blue title-company"> 
      {{menu.lowfat}} 
      </p> 
     </div> 
     </div> 
    {{/with}} 
    </div> 

Answer 1

selectedObject代わりにmodel.firstObjectを導入し、LHS側liがクリックされるたびに、それを更新します。

コントローラのselectedObjectプロパティの初期値を設定するには、routeのsetupControllerフックを使用します。

setupController(controller,model){ 
    this._super(...arguments); 
    controller.set('selectedObject',model.get('firstObject')); 
    } 

コントローラ内には、selectedObjectを更新するアクションがあります。

import Ember from 'ember'; 
export default Ember.Controller.extend({ 
    appName: 'Ember Twiddle', 
    selectedObject: undefined, 
    actions:{ 
    updateSelectedObject(item){ 
     this.set('selectedObject',item); 
    } 
    } 
}); 

とHBSで、あなたはliタグをクリックするとupdateSelectedObjectメソッドを呼び出す必要があります。

<div class="food-menu"> 
    <ul class="menu-list"> 
     {{#each model as |menu|}} 
     <li class="menu selectable {{if (eq menu selectedObject) 'active'}}" {{action 'updateSelectedObject' menu}}> 
      <div class="picture-wrapper"> 
      <img src="{{menu.picture}}" alt=""> 
      </div> 
      <div class="info-box"> 
      <h2 class="name">{{menu.name}}</h2> 
       <p class="light-blue title-company"> 
       {{menu.lowfat}} 
      </p> 
      </div> 
     </li> 
     {{/each}} 
    </ul> 
    </div> 
    <div class="menu-detail"> 
    {{#with selectedObject as |menu|}} 
     <div class="menu menu-banner"> 
     <div class="picture-wrapper"> 
      <img src="{{menu.picture}}" alt=""> 
     </div> 
     <div class="info-box"> 
      <h2 class="light name">{{menu.name}}</h2> 
      <p class="light-blue title-company"> 
      {{menu.lowfat}} 
      </p> 
     </div> 
     </div> 
    {{/with}} 
    </div>