Добавьте полосатый стиль в список предметов

Каким будет лучший способ перечеркнуть список с помощью KnockoutJS? Класс в div ниже должен быть четным или нечетным в зависимости от того, где он находится в списке, и обновлять при добавлении или удалении элементов.

<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>

Ответ 1

На форумах KO была тема для обсуждения: https://groups.google.com/d/topic/knockoutjs/cJ2_2QaIJdA/discussion

Решение, которое у меня было, было настраиваемой привязкой. На нем было несколько вариаций, но в основном это выглядело бы так:

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 вариантами этого связывания:

http://jsfiddle.net/rniemeyer/HJ8zJ/

Ответ 2

Я нашел функцию, которая возвращает индекс при итерации с помощью foreach, поэтому вы можете применять четные и нечетные классы достаточно компактным образом, например:

<tr data-bind="css: { 'even': ($index() % 2 == 0) }">

Ответ 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) }">

Ответ 4

Спасибо за полезные сообщения. Я хотел бы упомянуть, что 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>

Ответ 5

Вы можете использовать {{if}} и { {else}} условные выражения внутри шаблона, чтобы установить класс div.

Также вам нужно будет расширить вашу модель просмотра, чтобы включить функцию, которая возвращает индекс вашего текущего элемента, который скажет вам, является ли это нечетным или четным. (Что-то вроде этого)

Ответ 6

вот полный пример:

<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>