トグル方式の条件付き複数要素の選択

Question

私のリストには5つ以上の果物があります。ユーザーは5フルーツとしてmaxを選択できます。 5つの果物が届くと、私はあなたに5つの選択が終わったと言う彼らにalertを示したいと思います。

また、ユーザーはこれを実現する方法（トグル）を再度クリックすることで、

を、彼らが選択し、すでに果物の選択を解除することができますか？

コントローラー：

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