Блог

Как я могу добавить подкачку с помощью 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 внутри?

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

Основываясь на вашем коде, что-то вроде:

 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 /

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

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

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

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

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

Возможно https://github.com/addyosmani/backbone.paginator есть что-нибудь для вас? Со страницы Github:

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