Как повторно применить нокаутирующее связывание

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

Не могли бы вы просто использовать CSS для этого? Что-то вроде:

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

Затем каждая строка будет обновляться независимо от того, как она была добавлена.

Answer 2

Эффект Зебры - хороший ответ и рабочий пример jsfiddle.

или просто используйте индекс var в цикле 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>

Answer 3

Чтобы получить полосатый эффект, вам не нужен Knockout, используйте 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 класс, который применяется к элементу с отрицательным условием 'нечетное'.

Вот рабочая скрипка