Как использовать KnockoutJS для добавления страницы подкачки на стороне клиента в таблицу?

Как добавить пейджинг с помощью KnockoutJS?

Мой текущий код:

//assuming jsondata is a collection of data correctly passed into this function

myns.DisplayFields = function(jsondata) {
    console.debug(jsondata);
    window.viewModel = {
        fields: ko.observableArray(jsondata),
        sortByName: function() { //plus any custom functions I would like to perform
            this.items.sort(function(a, b) {
                return a.Name < b.Name ? -1 : 1;
            });
        },
    };

    ko.applyBindings(viewModel);
}

Мой взгляд:

<table>
  <tbody data-bind='template: "fieldTemplate"'></tbody>
</table>

<script type="text/html" id="fieldTemplate">
{{each fields}}
    <tr>
         <td> ${ FieldId }</td>
         <td>${ Type }</td>
         <td><b>${ Name }</b>: ${ Description }</td>
    </tr>
{{/each}}
</script>

Может ли я использовать jQuery, jQuery UI или другую библиотеку?

Я видел на сайте KnockoutJS пример:

myModel.gridViewModel = new ko.simpleGrid.viewModel({
    data: myModel.items,
    columns: [
        { headerText: "Item Name", rowText: "name" },
        { headerText: "Sales Count", rowText: "sales" },
        { headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
    ],
    pageSize: 4
});

Однако, где бы я добавил pageSize в свой код? Как эта страница выполняется во внутреннем пространстве?

Ответ 1

Основная идея заключается в том, что у вас есть ~~dependentObservable~~ Computed Observables, который представляет строки на вашей текущей странице и привязывает к ней таблицу. Вы бы нарезали общий массив, чтобы получить строки для страницы. Затем у вас есть кнопки/ссылки для пейджера, которые управляют индексом страницы, что приводит к переоценке зависимого параметра Observable, приводящего к текущим строкам.

На основе вашего кода что-то вроде:

var myns = {};
myns.DisplayFields = function(jsondata) {
    var viewModel = {
        fields: ko.observableArray(jsondata),
        sortByName: function() { //plus any custom functions I would like to perform
            this.items.sort(function(a, b) {
                return a.Name < b.Name ? -1 : 1;
            });
        },
        pageSize: ko.observable(10),
        pageIndex: ko.observable(0),
        previousPage: function() {
            this.pageIndex(this.pageIndex() - 1);
        },
        nextPage: function() {
            this.pageIndex(this.pageIndex() + 1);
        }
    };

    viewModel.maxPageIndex = ko.dependentObservable(function() {
        return Math.ceil(this.fields().length / this.pageSize()) - 1;
    }, viewModel);

    viewModel.pagedRows = ko.dependentObservable(function() {
        var size = this.pageSize();
        var start = this.pageIndex() * size;
        return this.fields.slice(start, start + size);
    }, viewModel);

    ko.applyBindings(viewModel);
};

Итак, вы привязываете таблицу к pagedRows.

Пример здесь: http://jsfiddle.net/rniemeyer/5Xr2X/

Ответ 2

Вы достигли того, что хотели?

Недавно я нажал пример хорошего пейджера, используя нокаут для github.

Смотрите https://github.com/remcoros/ko.pager для источника и http://remcoros.github.com/ko.pager/example.html для рабочего примера.

Все вычисления и некоторые удобные свойства предоставляются классом "Pager", с которым вы можете создавать и привязывать. Приведен пример рабочего шаблона.

См. исходный пример example.html для некоторых документов и использования.

Ответ 3

Возможно, https://github.com/addyosmani/backbone.paginator - это что-то для вас? На странице Github:

Backbone.Paginator - это набор укомплектованных компонентов для разбиения на страницы данных с использованием Backbone.js. Он нацелен на предоставление обоих решений для помощи в разбиении на страницы запросов на сервер (например, API), а также разбиение на страницы данных с одной загрузкой, где мы, возможно, захотим еще раз разбивать коллекцию N результатов на M-страницы в представлении.