토글 접근 방식을 사용하여 여러 요소 선택

Question

내 목록에 5 개 이상의 과일이 있습니다. 사용자는 최대 5 개 과일을 선택할 수 있습니다. 5 개의 과일이 도착하면 alert을 보여주고 싶습니다. 5 가지 선택이 끝났습니다. 또한

, 사용자들이 다시 클릭하여 선택하는 이미 열매를 취소 할 수 있습니다

방법이를 달성하기 위해 (토글)?

컨트롤러 :

여기

import Ember from 'ember'; 

export default Ember.Controller.extend({ 
    selectedIndex:null, 
    appName: 'Ember Twiddle', 
    actions:{ 
    select:function(index){ 
    console.log('index is', index); 
    } 
    } 
}); 

내 시도한다 : Live Demo

중 하나가 여기에 나를 도와?

Answer 1

선택한 색인의 배열을 만들어 거기에서부터 이동해야합니다.

import Ember from 'ember' 

export default Ember.Controller.extend({ 
    appName: 'Twiddle', 

    selected: [], 

    actions: { 
    toggle(index) { 
     const indexOf = this.selected.indexOf(index) 

     if (indexOf >= 0) { 
     this.selected.splice(indexOf, 1) 
     } else { 
     if (this.selected.length >= 5) { 
      return alert('You cannot select more than 5 fruits') 
     } 

     this.selected.push(index) 
     } 

     this.notifyPropertyChange('selected') 
    } 
    } 
}) 

은 떨림 : https://ember-twiddle.com/39ed50c0d4aae9c45c8ad05690ddac28