Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface PagedModelCollection

Provides paging functionality to the wrapped ModelCollection instance.

Order of Operations: Typically, you should call withPaging after applying any other decorators. This ensures the underling items collection represents the correct set of items when calculating page counts.

Note on Active Items: If you apply paging to a ActiveModelCollection created using the {@link module:models.withActive withActive} decorator, the current page index will update automatically as you change the active item.

listens

{@link Events.ADDED}

listens

{@link Events.REMOVED}

listens

{@link Events.ACTIVE_CHANGED}

listens

{@link Events.FILTER_CHANGED}

Hierarchy

Index

Properties

Methods

Properties

pageCount

pageCount: number

Returns the number of pages based on the number of items and the current pageSize.

readonly
example
const list = models.utils.withPaging(models.collection(1, 2, 3, 4));

list.pageSize(10);
console.log(list.pageCount); // 1

list.pageSize(2);
console.log(list.pageCount); // 2

list.add(5);
console.log(list.pageCount); // 3
example
// paging over a filtered list

// order matters! filter first, then page:
const list = models.utils.withPaging(
  models.utils.withFiltering(
    models.collection()));

list.pageSize(2);
list.add(1, 2, 3, 4, 5);
console.log(list.pageCount); // 3

const isOdd = num => num % 2;
list.filterBy(isOdd);
console.log(list.pageCount); // 2

Methods

[iterator]

  • [iterator](): Iterator<any, any, undefined>

  • Returns Iterator<any, any, undefined>

add

  • add(...items: any[]): void

  • Adds items to the ModelCollection.

    fires

    {@link Events.ADDED}

    example
    const list = models.collection(1, 2, 3);
    list.add(4, 5, 6);
    console.log(list.items()); // [1, 2, 3, 4, 5, 6]

    Parameters

    • Rest ...items: any[]

      The items to add to the ModelCollection.

    Returns void

clear

  • clear(): void

  • Removes all items from the ModelCollection.

    fires

    {@link Events.REMOVED}

    example
    const list = models.collection(1, 2, 3);
    list.add(4, 5, 6);
    console.log(list.items()); // [1, 2, 3, 4, 5, 6]
    list.clear();
    console.log(list.items()); // []

    Returns void

fire

  • fire(event: string | Symbol, ...args: any[]): Promise<any[]>

  • Notifies any subscribers registered through on or one that the specified event has occurred. If any subscribers throw an exception then the fire promise will be rejected, but any other subscribers will continue to be notified of the initial event.

    example
    import { tracker } from '~/tracking';

    const bus = events.bus();

    bus.on('event', async function handler(value1, value2) {
      return await someAsyncMethod(value1, value2);
    });

    bus.fire('event', arg1, arg2);
    const results = await bus.fire('event', arg1, arg2);
    await bus.fire('event', arg1, arg2).catch(tracker.error);
    example
    const bus = events.bus();

    async function dirtyCheck(container, path) {
      if (container.dirty)
        throw errors.error('save your changes');
    }

    async function navigate(container, path) {
      // load new route
    }

    bus.on('navigate', functions.sequence(dirtyCheck, navigate));

    export async function navigate(container, path) {
      await bus.fire('navigate', container, path);
    }

    // caller
    function linkHandler(e) {
      e.preventDefault();
      e.stopPropagation();
      const route = e.target.getAttribute('route');
      const container = e.target.getAttribute('container');
      navigate(container, route).then(
        () => console.info('navigation complete'),
        (err) => console.log('navigation failed', err);
      );
    }
    example
    const bus1 = events.bus(null, functions.sequence);
    const bus2 = events.bus(null, functions.parallel); // the default behavior

    function handler1() {
      return 1;
    }

    function handler2() {
      return 2;
    }

    bus1.on('event', handler1);
    bus1.on('event', handler2);

    // sequence bus returns last subscriber's return value
    await bus1.fire('event'); // 2

    bus2.on('event', handler1);
    bus2.on('event', handler2);

    // parallel bus returns array
    await bus2.fire('event'); // [1, 2]

    Parameters

    • event: string | Symbol

      The name of the event to fire.

    • Rest ...args: any[]

      Optional arguments to pass to subscribers.

    Returns Promise<any[]>

    Returns false if the bus is stopped. Otherwise, returns a Promise that will resolve with an array of values returned by event subscribers, or reject with the first Promise rejection or thrown error.

items

  • items(): any[]

  • The set of items in the ModelCollection.

    NOTE: Returns a shallow copy of the underlying collection. That means the array returned can be mutated without affecting the real ModelCollection, but all the items in the array are the same by reference, so mutating an object in the collection will also mutate the object stored in the ModelCollection.

    example
    let list = models.collection(1, 2, 3);
    list.add(4, 5, 6);
    console.log(list.items()); // [1, 2, 3, 4, 5, 6]
    list = models.utils.withOrdering(list, [], ['desc']);
    console.log(list.items()); // [6, 5, 4, 3, 2, 1]

    Returns any[]

nextPage

  • nextPage(): number

  • Moves to the next page of items. Does nothing if called on the last page.

    fires

    {@link Events.PAGE_CHANGED}

    example
    const list = models.utils.withPaging(models.collection(1, 2, 3, 4, 5));

    list.pageSize(2);
    list.pageIndex(); // 0

    list.nextPage();  // 1
    list.nextPage();  // 2
    list.nextPage();  // 2 (stops on last page)

    Returns number

    The new page index.

on

  • on(event: string | Symbol, subscriber: Function): VoidFunction

  • Registers a subscriber for the given event. The subscriber will be invoked in the context used to create the EventBus and passed any arguments provided to the fire method.

    example
    import { createSomething } from '../someFactory';

    const obj = createSomething();
    const bus = events.bus(obj); // subscriber context

    bus.one('initialize', function init() {
      // this only runs the first time
      // the 'initialize' event is fired;
    });

    export const off = bus.on('some-event', function handler(arg) {
      console.log(this === obj); // true
    });

    Parameters

    • event: string | Symbol

      The name of the event to listen for.

    • subscriber: Function

      The subscriber to invoke when the event is fired.

    Returns VoidFunction

    Method to invoke to remove the subscriber.

one

  • one(event: string | Symbol, subscriber: Function): VoidFunction

  • Similar to on, except the subscriber will be removed as soon as it is invoked.

    Parameters

    • event: string | Symbol

      The name of the event to listen for.

    • subscriber: Function

      The subscriber to invoke when the event is fired.

    Returns VoidFunction

    Method to invoke to remove the subscriber.

pageIndex

  • pageIndex(index?: number): number

  • Gets or sets the current page index (base 0). If outside the available bounds, the given index will be clamped between 0 and pageCount - 1.

    example
    const list = models.utils.withPaging(models.collection(1, 2, 3, 4, 5));

    list.pageSize(2);
    list.pageIndex(); // 0

    list.nextPage();
    list.pageIndex(); // 1

    list.pageIndex(0); // 0
    list.pageIndex(15); // 2
    list.pageIndex(-1); // 0

    Parameters

    • Optional index: number

      The new page index.

    Returns number

    The new page index.

pageSize

  • pageSize(size?: number): number

  • Gets or sets the current page size (the number of items that should be visible on each page.)

    example
    const list = models.utils.withPaging(models.collection());

    list.pageSize(); // 50 (default page size)

    list.pageSize(5); // 5
    list.add(1, 2, 3, 4, 5, 6, 7, 8);
    list.items(); // [1, 2, 3, 4, 5]

    list.pageSize(3); // 3
    list.items(); // [1, 2, 3]

    Parameters

    • Optional size: number

      The number of items to show on each page. Pass no arguments to retrieve the current page size.

    Returns number

    The current page size.

prevPage

  • prevPage(): number

  • Moves to the previous page of items. Does nothing if called on the first page.

    fires

    {@link Events.PAGE_CHANGED}

    example
    const list = models.utils.withPaging(models.collection(1, 2, 3, 4, 5));

    list.pageSize(2);
    list.pageIndex(2); // start on last page

    list.prevPage();  // 1
    list.prevPage();  // 0
    list.prevPage();  // 0 (stops on first page)

    Returns number

    The new page index.

remove

  • remove(...items: any[]): void

  • Removes items from the ModelCollection.

    fires

    {@link Events.REMOVED}

    example
    const list = models.collection(1, 2, 3);
    list.add(4, 5, 6);
    list.remove(5, 1);
    console.log(list.items()); // [2, 3, 4, 6]

    Parameters

    • Rest ...items: any[]

      The items to remove from the ModelCollection.

    Returns void

resume

  • resume(): void

  • Resumes notifying subscribers after stop was called. Any events fired before resuming are dropped entirely.

    example
    const bus = events.bus();

    bus.on('add', function handler(value1, value2) {
      console.log(value1 + value2);
    });

    bus.fire('add', 1, 2); // 3
    bus.stop();
    bus.fire('add', 1, 2); // does not invoke subscriber
    bus.resume();
    bus.fire('add', 1, 2); // 3

    Returns void

stop

  • stop(): void

  • Stops notifying subscribers of fired events until resume is called.

    example
    const bus = events.bus();

    bus.on('add', function handler(value1, value2) {
      console.log(value1 + value2);
    });

    bus.fire('add', 1, 2); // 3
    bus.stop();
    bus.fire('add', 1, 2); // does not invoke subscriber

    Returns void