在 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> 时，它将调用过滤 either/or 的函数 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 class。剩下的就简单了CSS.

Checkout this twiddle for a working demonstration.

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

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

How to highlight a list-item in an unordered list when clicked in Ember?

html

css

handlebars.js

twitter-bootstrap

ember.js