0

目前我有一个敲除绑定，可以在列表中对行进行条纹处理，效果很好

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'">
4

3 回答 3

1

斑马效应 - 一个很好的答案和一个有效的jsfiddle示例。

或者只是在你的 foreach 循环中为你的列表或表格标签元素（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>
于 2012-07-11T05:35:09.937 回答
1

你不能只使用 CSS 吗？就像是：

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

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

于 2012-07-11T06:16:00.167 回答
0

要获得条纹效果，您不需要 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类，该类应用于具有否定“奇数”条件的元素。

这是一个工作小提琴

于 2012-07-12T08:41:57.297 回答