将条纹样式添加到项目列表 [英] Add striped styling to a list of items
本文介绍了将条纹样式添加到项目列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
使用KnockoutJS剥离列表的最佳方法是什么?以下div上的类应为偶数或奇数,具体取决于其在列表中的位置,并在添加或删除项目时进行更新.
What would be the best way to stripe a list with KnockoutJS? The class on the div below should be even or odd depending where it is in the list, and update when adding or removing items.
<div class="Headlines loader"
data-bind="css: { loader: headlines().length == 0 },
template: { name: 'recentHeadlinesTemplate',
foreach: beforeHeadlineAddition,
beforeRemove: function(elem) { $(elem).slideUp() },
afterAdd: slideDown }">
</div>
<script type="text/html" id="recentHeadlinesTemplate">
<div class="even">
${Title}
</div>
</script>
推荐答案
There was a topic for this on the KO forums a while back here: https://groups.google.com/d/topic/knockoutjs/cJ2_2QaIJdA/discussion
我遇到的解决方案是自定义绑定.它有几个变体,但是基本上看起来像:
The solution that I had was a custom binding. There were a couple variations on it, but it basically would look like:
ko.bindingHandlers.stripe = {
update: function(element, valueAccessor, allBindingsAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()); //creates the dependency
var allBindings = allBindingsAccessor();
var even = allBindings.evenClass;
var odd = allBindings.oddClass;
//update odd rows
$(element).children(":nth-child(odd)").addClass(odd).removeClass(even);
//update even rows
$(element).children(":nth-child(even)").addClass(even).removeClass(odd);;
}
}
并按如下方式使用:
<ul data-bind="template: { name: 'itemsTmpl', foreach: items }, stripe: items, evenClass: 'light', oddClass: 'dark'"></ul>
在此示例此绑定的3种变体:
Sample here with 3 variations of this binding:
http://jsfiddle.net/rniemeyer/HJ8zJ/
这篇关于将条纹样式添加到项目列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文