Knockout.js 将条带样式添加到项目列表中
用KnockoutJS为列表添加条带的最佳方法是什么?下面div上的类应为偶数或奇数,具体取决于它在列表中的位置,并在添加或删除项时更新Knockout.js 将条带样式添加到项目列表中,knockout.js,zebra-striping,Knockout.js,Zebra Striping,用KnockoutJS为列表添加条带的最佳方法是什么?下面div上的类应为偶数或奇数,具体取决于它在列表中的位置,并在添加或删除项时更新 ${Title} 您可以使用模板中的和条件语句来设置div的类 此外,您还需要扩展视图模型,以包含一个函数,该函数返回当前项的索引,它将告诉您该项是奇数还是偶数。()不久前在KO论坛上有一个主题: 我的解决方案是定制绑定。它有几个变体,但基本上看起来像: ko.bindingHandlers.stripe = { update: function(e
${Title}
您可以使用模板中的和条件语句来设置div的类
此外,您还需要扩展视图模型,以包含一个函数,该函数返回当前项的索引,它将告诉您该项是奇数还是偶数。()不久前在KO论坛上有一个主题: 我的解决方案是定制绑定。它有几个变体,但基本上看起来像:
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种变体:
一个简单的方法是添加一个计算的可观测值,为每个元素添加一个索引,例如
self.logLines = ko.observable(logLinesInput);
self.enhancedLogLines = ko.computed(function() {
var res = [];
$.each(self.logLines(), function(index, ll) {
res.push(new LogLine(index, ll));
});
return res;
}, self);
在我的例子中,LogLine()
使用索引字段和原始对象中的其他字段创建一个对象
现在,您可以轻松地将斑马条纹添加到输出:
<tr data-bind="css: { odd: (index % 2 == 1), even: (index % 2 == 0) }">
我发现了一个函数,在使用foreach进行迭代时返回索引,因此您可以以合理紧凑的方式应用偶数类和奇数类,例如:
<tr data-bind="css: { 'even': ($index() % 2 == 0) }">
以下是一个完整的示例:
<ul class="pickupPointHours" data-bind="foreach: Items">
<li data-bind="css: { lineEven: ($index()%2 === 0), lineOdd: ($index()%2 === 1)}">
<span class="pickupPointDay" data-bind="text: TextProperty"></span>
</li>
</ul>
-
谢谢你的帮助。我想说的是,css可以很好地进行条带化,但嵌入的“if”似乎只有在行被渲染后才能起作用。因此,使用$index或css奇偶功能不会产生预期的结果。如果不使用模板,我发现您可以将KO逻辑包装到行上,以便逻辑在对行计数之前发生
<tbody data-bind="foreach: viewModel.configuration().items()"">
<!-- ko if: $data.part() != '' -->
<tr>
<td data-bind="text: $index"></td><td data-bind="text: $data.part()"></td>
</tr>
<!-- /ko -->
</tbody>
如何确保在应用条纹之前完成模板渲染?或者这甚至是一个问题吗?只需要将条带
绑定放在模板绑定之后,就可以了。绑定确实是从左到右运行的,但是Steve说这并不是他想要保证的。否则,fiddle中有一个名为templateWithStripe
的版本,它包装了模板绑定并绝对保证了顺序。它可能提供了最不冗长的语法。我看到了这一点,但我希望有一个更简单的方法。我想我会这样做。这个解决方案确实有效,但我发现ZiglioNZ的答案更简单,而且效果也一样。这可能适用于静态列表,但如果我删除和添加项目,则一行中可能有两行偶数或奇数。我认为当您从数组中添加/删除某些内容时,knockoutjs会重新呈现整个模板。绑定上下文中记录了$index:-谢谢@wesct这一直是我首选的方法,与公认的答案相比,我看不出它有什么不足之处。谢谢,我认为公认的答案比我的答案早,所以除非原始海报对其进行了评论,否则它将保持原样。不确定是否有其他人可以改变这一点