如何在Ember中单击时突出显示无序列表中的列表项目？

问题描述：

我们正在创建一种方法来筛选我们的职位门户。如何在Ember中单击时突出显示无序列表中的列表项目？

{{#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正好一个过滤器在任何时候施加）的函数filterWith。我们希望无论点击哪个过滤器都会突出显示与其他过滤器不同的颜色。

实现这个过程非常困难，因为我们希望以不使用jQuery的方式来执行它（我们一直在将jQuery和Ember混合在一起）。如果我们知道如何使用Bootstrap，我们可以做到这一点。

编辑：

这是我的灰烬控制器（AKA其中filterWith定义）。

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); 
     } 
    } 
});

我通过两个变量（级别和过滤器）进行过滤。部门目前没有做任何事情，所以我建议忽略它。

你可能会显示一些'filterWith'动作？还有什么是'rl-dropdown'组件？ – Lux

可以像[这项工作]（https://ember-twiddle.com/1e90e78c52181bacecd9acad944eccb5?openFiles=controllers.application.js%2C）？我添加了一个if条件来添加一个类。你只需要着色它我想。 – Mithrilhall

只要它有效，我很高兴它的混乱。最终，我只需要某种选择器（比如'：hover'）来改变CSS。 – Cameron

答

可能是行动filterWith莫名其妙地应该存储当前的过滤器值。接下来，您可以从ember-truth-helpers开始eq助手做类似class="{{if (eq currentFilter 'intern') 'active'}}"的操作，它将为您提供当前过滤器上的active类。剩下的就是简单的CSS。

Checkout this twiddle for a working demonstration。

您可以做的另一件事是动态生成过滤器，然后附加一个布尔值，告诉哪一个是活动的。这是没有帮手的解决方案。

谢谢。这工作，我欣赏额外的旋转！ – Cameron

如何在Ember中单击时突出显示无序列表中的列表项目？

相关推荐