Emberでクリックしたときに順序付けられていないリストのリスト項目を強調表示する方法は？

Question

私たちは、ジョブポータルでフィルターに掛ける方法を作り出しています。

{{#rl-dropdown tagName="ul" class="dropdown-menu" closeOnChildClick="li"}} 
    <li {{action 'filterWith' department 'all'}}> 
     All 
    </li> 
    <li active=true {{action 'filterWith' department 'intern'}}> 
     Intern 
    </li> 
    <li {{action 'filterWith' department 'newgrad'}}> 
     New Grads 
    </li> 
    <li {{action 'filterWith' department 'entry'}}> 
     Entry Level 
    </li> 
    <li {{action 'filterWith' department 'senior'}}> 
     Senior 
    </li> 
{{/rl-dropdown}} 

ユーザが<li>をクリックすると、それはどちらか/又は（AKAは、ちょうど1つのフィルタは、任意の時点で適用される）をフィルタリングする機能filterWithを呼び出します。クリックされたフィルタは、他のフィルタとは異なる色で強調表示されます。

これを実装することは、jQueryを使用しない方法で行うことが非常に困難でした（jQueryとEmberの混在に問題があります）。私たちが方法を知っていれば、それを行うためにBootstrapでそれを行うことができるかもしれません。

編集：

これは私のエンバーコントローラ（filterWithが定義されているAKA）です。

export default Ember.Controller.extend({ 
    department: 'all', 
    level: 'all', 
    filteredPosts: Ember.computed('level', function() { 
     var emberCont = this; 
     return this.get('model').filter(function(item){ 
      var lvl = emberCont.get('level'); 

      // This should be refactored somehow 
      if(lvl == 'all') { 
       return true; 
      } 
      else if (lvl == item.get('level')) { 
       return true; 
      } 

      return false; 
     }); 
    }), 


    actions: { 
     filterWith(dept, lvl) { 
      this.set('department', dept); 
      this.set('level', lvl); 
     } 
    } 
}); 

私は2つの変数（レベルとフィルタ）でフィルタリングします。部は現在何もしていないので、私はそれを無視することをお勧めします。

Answer 1

おそらく、アクションfilterWithは、現在のフィルタ値を何らかの形で保存する必要があります。次にeqヘルパーをember-truth-helpersからclass="{{if (eq currentFilter 'intern') 'active'}}"のように実行すると、現在のフィルタにactiveクラスが追加されます。残りはシンプルなCSSです。

Checkout this twiddle for a working demonstration。

---

さらに、フィルタを動的に生成し、どのフィルタがアクティブかを示すブール値を付加することもできます。これはヘルパーのないソリューションです。