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，该函数会过滤/或（AKA在任何时候都应用了一个过滤器）。我们希望点击哪个过滤器突出显示与其余过滤器不同的颜色。

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

修改

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

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

Answer 1

行动SELECT MAX(RIGHT(idTransaksiDetail,5)) AS notransπ…可能会以某种方式存储当前过滤器值。接下来，ember-truth-helpers的filterWith帮助可以执行类似eq的操作，这将为您提供当前过滤器上的class="{{if (eq currentFilter 'intern') 'active'}}"类。剩下的就是简单的CSS。

Checkout this twiddle for a working demonstration

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

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

1 个答案: