gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 08:15:36 25 4
gpt4 key购买 nike

我们正在创建一种在我们的职位门户中进行过滤的方法。

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

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

最佳答案

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

Checkout this twiddle for a working demonstration .


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

关于html - 在 Ember 中单击时如何突出显示无序列表中的列表项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45927066/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com