Dodaj stylizację pasków do listy pozycji

Question

Jaki byłby najlepszy sposób na rozłożenie listy za pomocą KnockoutJS? Klasa w dziale div powinna być parzysta lub nieparzysta w zależności od tego, gdzie jest na liście, i aktualizować ją podczas dodawania lub usuwania elementów.

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

Answer 1

Było to tematem na forach KO jakiś czas temu tutaj: https://groups.google.com/d/topic/knockoutjs/cJ2_2QaIJdA/discussion

Rozwiązanie, które miałam zwyczaj wiązania. Było kilka odmian, ale to w zasadzie będzie wyglądać następująco:

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

i będą używane jak:

<ul data-bind="template: { name: 'itemsTmpl', foreach: items }, stripe: items, evenClass: 'light', oddClass: 'dark'"></ul> 

Sample tu w 3 odmianach tego Oprawa:

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

Answer 2

można użyć instrukcji warunkowych {{if}} i {{else}} wewnątrz szablonu, aby ustawić klasę div.

Należy również rozszerzyć model widoku, aby uwzględnić funkcję, która zwraca indeks bieżącego elementu, który wskazywałby, czy jest on nieparzysty czy parzysty. (Something like this)

Answer 3

Jednym z łatwych sposobów na to jest dodanie obliczalnego observable, które dodaje indeks do każdego elementu, np.

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

W moim przypadku LogLine() tworzy obiekt z polem wskazującym i innych dziedzinach, które były w oryginalnym obiektem.

Teraz można łatwo dodawać Zebra do wyjścia:

  <tr data-bind="css: { odd: (index % 2 == 1), even: (index % 2 == 0) }"> 

Answer 4

Znalazłem funkcję, która zwraca indeks podczas iteracji z foreach, więc można zastosować parzystych i nieparzystych zajęcia w stosunkowo zwarty sposób na przykład:

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

Answer 5

tutaj jest pełna przykładów:

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

Answer 6

Dzięki fo r pomocne posty. Chciałem wspomnieć, że css może wykonać dobrą robotę stripowania, ale osadzone "if" wydaje się działać dopiero po renderowaniu wiersza. Dlatego użycie indeksu $ lub funkcji css nieparzystych/parzystych nie przynosi pożądanych rezultatów. Bez użycia szablonu odkryłem, że można owijać logikę KO wokół rzędu, aby logika wystąpiła przed zliczeniem wiersza.

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