typescript 小型TypeScript（JS）类，用于需要在页面上分开的可观察数组。

Posted 2021-05-21

// Взято по примеру из источника: http://blog.greatrexpectations.com/2012/07/11/paging-lists-with-knockout/
     export class PagedObservableArray {
         options: any;

         //public members
         allData: KnockoutObservableArray<any>;
         pageSize: KnockoutObservable<number>;
         pageIndex: KnockoutObservable<number>;
         page: KnockoutComputed<any>;
         pageCount: KnockoutComputed<number>;
         nextPage: any;
         previousPage: any;

         constructor() {
             this.options = {};
             this.allData = ko.observableArray([]);
             this.pageSize = ko.observable(10);
             this.pageIndex = ko.observable(0);
             this.nextPage = null;
             this.previousPage = null;

             //the current page data
             this.page = ko.computed(() => {
                 var pageSize = this.pageSize(),
                     pageIndex = this.pageIndex(),
                     startIndex = pageSize * pageIndex,
                     endIndex = pageSize * (pageIndex + 1);

                 return this.allData().slice(startIndex, endIndex);
             }, this);

             //the number of pages
             this.pageCount = ko.computed(() => {
                 return Math.ceil(this.allData().length / this.pageSize()) || 1;
             });
         }

         // инициализация объекта с данными для построения страничного представления
         init = (options) => {
             this.options = options || {};

             if ($.isArray(options))
                 this.options = { data: options };

             //the complete data collection
             this.allData(options.data);

             //the size of the pages to display
             this.pageSize(options.pageSize || 10);

             //the index of the current page
             this.pageIndex(0);

             //move to the next page
             this.nextPage = () => {
                 if (this.pageIndex() < (this.pageCount() - 1))
                     this.pageIndex(this.pageIndex() + 1);
             };

             //move to the previous page
             this.previousPage = () => {
                 if (this.pageIndex() > 0)
                     this.pageIndex(this.pageIndex() - 1);
             };

             //reset page index when page size changes
             this.pageSize.subscribe(() => { this.pageIndex(0); });
             this.allData.subscribe(() => { this.pageIndex(0); });
         }

         add = (item) => {
             this.allData.push(item);
         }

         remove = (item) => {
             this.allData.remove(item);
         }
     };