OnClick model.firstObject 데이터 변경

Question

1. 왼쪽에 li 태그로 데이터를 표시하는 모델이 있습니다. 사용자가 현재의 리튬 태그를 클릭하면 model.firstObject 디스플레이의 오른쪽 하나에

2. 는

3. , 나는 현재 리튬 데이터를 표시하기 위해 오른쪽 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

대신 model.firstObject의 selectedObject을 소개하고, 좌 측 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>