在 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> 时，它会调用函数filterWith 过滤或/或（也就是在任何时候都应用一个过滤器）。我们希望单击的任何过滤器都以与其他过滤器不同的颜色突出显示。

实现这一点非常困难，因为我们希望以一种不使用 jQuery 的方式来实现（我们在将 jQuery 和 Ember 混合在一起时遇到了麻烦）。如果我们知道怎么做，我们也许可以用 Bootstrap 来做。

编辑：

这是我的 Ember 控制器（也就是定义了 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);
        }
    }
});

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

Answer 1

可能filterWith 操作应该以某种方式存储当前过滤器值。接下来，您可以使用来自ember-truth-helpers 的eq 助手来执行类似class="{{if (eq currentFilter 'intern') 'active'}}" 的操作，这将为您提供当前过滤器上的active 类。剩下的就是简单的 CSS。

Checkout this twiddle for a working demonstration.

---

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