html - 在 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 Controller (也就是定义了 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 .

---

您可以做的另一件事是动态生成您的过滤器，然后附加一个 bool 值来告诉您哪个过滤器处于事件状态。这是一个没有 helper 的解决方案。