Knockout.js - динамические столбцы, но ограничение не более 5 для каждой строки

Я нашел аналогичный вопрос/ответ здесь: Как визуализировать таблицу с некоторыми фиксированными и некоторыми динамическими столбцами

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

Например:

var vm = {
    item: { name: 'test1' },
    item: { name: 'test2' },
    item: { name: 'test3' },
    item: { name: 'test4' },
    item: { name: 'test5' },
    item: { name: 'test6' }
};

Дайте эту модель, как я могу получить эту таблицу?

<table>
   <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
      <td>test4</td>
      <td>test5</td>
   </tr>
   <tr>
      <td>test6</td>
   <tr>
</table>

Ответы

Ответ 1

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

Вот пример, который делает это число столбцов видимым, чтобы оно могло динамически обновляться. http://jsfiddle.net/rniemeyer/9TN9W/

var viewModel = {
    items: ko.observableArray(),
    columnLength: ko.observable(5)  
};

//sample data
for (var i = 0; i < 100; i++) {
    viewModel.items.push({ name: 'test' + i });  
}

//return an array of rows.  Each row is an array of items
viewModel.rows = ko.dependentObservable(function() {
    var result = [],
        colLength = parseInt(this.columnLength(), 10),
        row;


    //loop through items and push each item to a row array that gets pushed to the final result
    for (var i = 0, j = this.items().length; i < j; i++) {
        if (i % colLength === 0) {
            if (row) {
              result.push(row);     
            }
            row = [];
        }
        row.push(this.items()[i]);
    }

    //push the final row  
    if (row) {
        result.push(row);
    }

    return result;
}, viewModel);

Ответ 2

Ближайшим, с которым я смог добраться до решения, является следующее:

<table>
    <tbody>
            <tr data-bind="template: { name: 'rowTmpl', foreach: items}">

            </tr>
    </tbody>
</table>
<script id="rowTmpl" type="text/html">

        <td data-bind="text: name"></td>

        <!-- ko if: (vm.items.indexOf($data) + 1) % 5 == 0 -->
        <td>new row html here</td>
        <!-- /ko --> 

</script>


vm = {

            items: ko.observableArray([
                { name: 'test1' }, 
                { name: 'test2' }, 
                { name: 'test3' }, 
                { name: 'test4' }, 
                { name: 'test5' }, 
                { name: 'test6' } 
            ])
        }

        ko.applyBindings(vm);

.., который выводит это:

| test1 | test2 | test3 | test4 | test5 | новый ряд html здесь | test6 |

Вставляет новый элемент на каждый пятый элемент. Однако, если я подставляю <td>new row html here</td> с помощью </tr><tr>, механизм шаблона выдает ошибку. Возможно, какой-то другой SO-er может основываться на этом и показать, как выводить не строго правильный html.

В любом случае, надеюсь, это немного поможет.