Question

目前我有一个敲除绑定，可以对列表中的行进行条纹处理

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

从

触发

<button data-bind="click: addWidget" style="display:none">Add Item</button>

我遇到的问题是从服务器重新加载数据时，我在视图模型中手动调用addWidget（）条带绑定处理程序未应用 - 所有行显示为相同的颜色，如果我单击html按钮然后绑定发生和条纹出现

var ViewModel = function() {

     self.addWidget();

});

是否可以在js中手动重新应用此自定义绑定？

由于

编辑：

条带绑定会像这样应用

<div data-bind="foreach: widgets, stripe: widgets, evenClass: 'light', oddClass: 'dark'">

Answer 1

Zebra效果 - 一个很好的answer和一个有效的jsfiddle示例。

或者只使用foreach循环中的index var作为列表或表标记元素（jsfiddle）：

<ul data-bind="foreach: myList">
    <li data-bind="css: { 'even': ($index() % 2 == 0) }">
        The value is <span data-bind="text: $data"></span>
    </li>
</ul>

Answer 2

你能不能只使用CSS吗？类似的东西：

div.widget:nth-child(2n) { background: grey; }

然后每行都会更新，无论它是如何添加的。

Answer 3

要获得条纹效果，您不需要Knockout，使用像Tom Hall建议的CSS。但是，如果你坚持，这是我对你的问题的看法（假设你使用的是ko 2.1.x +）：

HTML

<table>
    <tbody data-bind="foreach: rows">
        <tr data-bind="css: {odd: $index()%2} ">
            <td>Test Data</td>
        </tr>
    </tbody>
</table>

JS

var VM = {
    rows: [{},{},{},{},{}]
};

ko.applyBindings(VM);

您需要做的就是提供一个CSS类.odd。如果您还要为偶数行设置样式，您可以在<tr>上设置默认背景颜色，或者提供一个.even类，该类应用于具有否定“奇数”条件的元素。 / p>

这是一个有效的Fiddle

如何重新应用淘汰赛绑定

3 个答案: