knockout.js - data - Agregue estilo rayado a una lista de elementos

knockout select value binding

Question

¿Cuál sería la mejor manera de alinear una lista con KnockoutJS? La clase en el div a continuación debe ser par o impar, dependiendo de dónde se encuentre en la lista, y actualizar al agregar o eliminar elementos.

<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

Encontré una función que devuelve un índice cuando se itera con foreach, por lo que puede aplicar clases pares e impares de una manera razonablemente compacta, por ejemplo:

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

Answer 2

Gracias por las publicaciones útiles. Quería mencionar que CSS puede hacer un buen trabajo de striping, pero el ''si'' incrustado solo parece funcionar después de que se haya renderizado la fila. Por lo tanto, usar $ index o las capacidades css impad / even no arrojan los resultados deseados. Sin usar una plantilla, descubrí que puede ajustar la lógica de KO alrededor de la fila para que la lógica ocurra antes de contar la fila.

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

Answer 3

Hubo un tema para esto en los foros de KO hace un tiempo aquí: https://groups.google.com/d/topic/knockoutjs/cJ2_2QaIJdA/discussion

La solución que tuve fue un enlace personalizado. Hubo un par de variaciones, pero básicamente se vería así:

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

y ser usado como:

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

Muestra aquí con 3 variaciones de este enlace:

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

Answer 4

Puede usar las sentencias condicionales {{if}} y {{else}} dentro de la plantilla para establecer la clase del div.

También necesitará extender su Modelo de Vista para incluir una función que devuelva el índice de su elemento actual, lo que le indicaría si es impar o par. ( Algo así )

Answer 5

Una manera fácil de hacerlo es agregar un observable calculado que agrega un índice a cada elemento, por ejemplo

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

En mi caso, LogLine() crea un objeto con un campo de índice y los otros campos que estaban en el objeto original.

Ahora puede agregar fácilmente rayas de cebra a su salida:

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

Answer 6

aquí hay un ejemplo completo:

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