ViewCollection

Returns the first item from the collection or null when collection is empty.

Returns the last item from the collection or null when collection is empty.

The number of items available in the collection.

A parent element within which child views are rendered and managed in DOM.

Creates a new instance of the ViewCollection.

Type parameters

TView : extends [object Object] = View

Parameters

initialItems : Iterable<TView>

The initial items of the collection.

Defaults to []

Iterable interface.

Returns

Iterator<TView>

Adds an item into the collection.

If the item does not have an id, then it will be automatically generated and set on the item.

Parameters

item : TView

[ index ] : number

The position of the item in the collection. The item is pushed to the collection when index not specified.

Returns

this

Fires

• add
• change

Adds multiple items into the collection.

Any item not containing an id will get an automatically generated one.

Parameters

items : Iterable<TView>

[ index ] : number

The position of the insertion. Items will be appended if no index is specified.

Returns

this

Fires

• add
• change

Binds and synchronizes the collection with another one.

The binding can be a simple factory:

class FactoryClass {
	public label: string;

	constructor( data: { label: string } ) {
		this.label = data.label;
	}
}

const source = new Collection<{ label: string }>( { idProperty: 'label' } );
const target = new Collection<FactoryClass>();

target.bindTo( source ).as( FactoryClass );

source.add( { label: 'foo' } );
source.add( { label: 'bar' } );

console.log( target.length ); // 2
console.log( target.get( 1 ).label ); // 'bar'

source.remove( 0 );
console.log( target.length ); // 1
console.log( target.get( 0 ).label ); // 'bar'

or the factory driven by a custom callback:

class FooClass {
	public label: string;

	constructor( data: { label: string } ) {
		this.label = data.label;
	}
}

class BarClass {
	public label: string;

	constructor( data: { label: string } ) {
		this.label = data.label;
	}
}

const source = new Collection<{ label: string }>( { idProperty: 'label' } );
const target = new Collection<FooClass | BarClass>();

target.bindTo( source ).using( ( item ) => {
	if ( item.label == 'foo' ) {
		return new FooClass( item );
	} else {
		return new BarClass( item );
	}
} );

source.add( { label: 'foo' } );
source.add( { label: 'bar' } );

console.log( target.length ); // 2
console.log( target.get( 0 ) instanceof FooClass ); // true
console.log( target.get( 1 ) instanceof BarClass ); // true

or the factory out of property name:

const source = new Collection<{ nested: { value: string } }>();
const target = new Collection<{ value: string }>();

target.bindTo( source ).using( 'nested' );

source.add( { nested: { value: 'foo' } } );
source.add( { nested: { value: 'bar' } } );

console.log( target.length ); // 2
console.log( target.get( 0 ).value ); // 'foo'
console.log( target.get( 1 ).value ); // 'bar'

It's possible to skip specified items by returning null value:

const source = new Collection<{ hidden: boolean }>();
const target = new Collection<{ hidden: boolean }>();

target.bindTo( source ).using( item => {
	if ( item.hidden ) {
		return null;
	}

	return item;
} );

source.add( { hidden: true } );
source.add( { hidden: false } );

console.log( source.length ); // 2
console.log( target.length ); // 1

Note: clear can be used to break the binding.

Type parameters

S : extends Record<string, any>

The type of externalCollection element.

Parameters

externalCollection : Collection<S>

A collection to be bound.

Returns

CollectionBindToChain<S, TView>

The binding chain object.

Removes all items from the collection and destroys the binding created using bindTo.

Returns

void

Fires

• remove
• change

Delegates selected events coming from within views in the collection to any Emitter.

For the following views and collection:

const viewA = new View();
const viewB = new View();
const viewC = new View();

const views = parentView.createCollection();

views.delegate( 'eventX' ).to( viewB );
views.delegate( 'eventX', 'eventY' ).to( viewC );

views.add( viewA );

the eventX is delegated (fired by) viewB and viewC along with customData:

viewA.fire( 'eventX', customData );

and eventY is delegated (fired by) viewC along with customData:

viewA.fire( 'eventY', customData );

See delegate.

Parameters

events : Array<string>

View event names to be delegated to another Emitter.

Returns

EmitterMixinDelegateChain

Object with to property, a function which accepts the destination of delegated events.

Destroys the view collection along with child views. See the view destroy method.

Returns

void

Returns an array with items for which the callback returned a true value.

Parameters

callback : ( item: TView, index: number ) => boolean

[ ctx ] : any

Context in which the callback will be called.

Returns

Array<TView>

The array with matching items.

Finds the first item in the collection for which the callback returns a true value.

Parameters

callback : ( item: TView, index: number ) => boolean

[ ctx ] : any

Context in which the callback will be called.

Returns

undefined | TView

The item for which callback returned a true value.

Fires an event, executing all callbacks registered for it.

The first parameter passed to callbacks is an EventInfo object, followed by the optional args provided in the fire() method call.

Type parameters

TEvent : extends BaseEvent

The type describing the event. See BaseEvent.

Parameters

eventOrInfo : GetNameOrEventInfo<TEvent>

The name of the event or EventInfo object if event is delegated.

args : TEvent[ 'args' ]

Additional arguments to be passed to the callbacks.

Returns

GetEventInfo<TEvent>[ 'return' ]

By default the method returns undefined. However, the return value can be changed by listeners through modification of the evt.return's property (the event info is the first param of every callback).

Performs the specified action for each item in the collection.

Parameters

callback : ( item: TView, index: number ) => unknown

[ ctx ] : any

Context in which the callback will be called.

Returns

void

Gets an item by its ID or index.

Parameters

idOrIndex : string | number

The item ID or index in the collection.

Returns

null | TView

The requested item or null if such item does not exist.

Gets an index of an item in the collection. When an item is not defined in the collection, the index will equal -1.

Parameters

itemOrId : string | TView

The item or its ID in the collection.

Returns

number

The index of a given item.

Returns a Boolean indicating whether the collection contains an item.

Parameters

itemOrId : string | TView

The item or its ID in the collection.

Returns

boolean

true if the collection contains the item, false otherwise.

Registers a callback function to be executed when an event is fired in a specific (emitter) object.

Events can be grouped in namespaces using :. When namespaced event is fired, it additionally fires all callbacks for that namespace.

// myEmitter.on( ... ) is a shorthand for myEmitter.listenTo( myEmitter, ... ).
myEmitter.on( 'myGroup', genericCallback );
myEmitter.on( 'myGroup:myEvent', specificCallback );

// genericCallback is fired.
myEmitter.fire( 'myGroup' );
// both genericCallback and specificCallback are fired.
myEmitter.fire( 'myGroup:myEvent' );
// genericCallback is fired even though there are no callbacks for "foo".
myEmitter.fire( 'myGroup:foo' );

An event callback can stop the event and set the return value of the fire method.

Type parameters

TEvent : extends BaseEvent

The type describing the event. See BaseEvent.

Parameters

emitter : Emitter

The object that fires the event.

event : TEvent[ 'name' ]

The name of the event.

callback : GetCallback<TEvent>

The function to be called on event.

[ options ] : GetCallbackOptions<TEvent>

Additional options.

Returns

void

Executes the callback for each item in the collection and composes an array or values returned by this callback.

Type parameters

U

The result type of the callback.

Parameters

callback : ( item: TView, index: number ) => U

[ ctx ] : any

Context in which the callback will be called.

Returns

Array<U>

The result of mapping.

Stops executing the callback on the given event. Shorthand for this.stopListening( this, event, callback ).

Parameters

event : string

The name of the event.

callback : Function

The function to stop being called.

Returns

void

Registers a callback function to be executed when an event is fired.

Shorthand for this.listenTo( this, event, callback, options ) (it makes the emitter listen on itself).

Type parameters

TEvent : extends BaseEvent

The type descibing the event. See BaseEvent.

Parameters

event : TEvent[ 'name' ]

The name of the event.

callback : GetCallback<TEvent>

The function to be called on event.

[ options ] : GetCallbackOptions<TEvent>

Additional options.

Returns

void

Registers a callback function to be executed on the next time the event is fired only. This is similar to calling on followed by off in the callback.

Type parameters

TEvent : extends BaseEvent

The type descibing the event. See BaseEvent.

Parameters

event : TEvent[ 'name' ]

The name of the event.

callback : GetCallback<TEvent>

The function to be called on event.

[ options ] : GetCallbackOptions<TEvent>

Additional options.

Returns

void

Removes a child view from the collection. If the parent element of the collection has been set, the element of the view is also removed in DOM, reflecting the order of the collection.

See the add method.

Parameters

subject : string | number | TView

The view to remove, its id or index in the collection.

Returns

TView

The removed view.

Sets the parent HTML element of this collection. When parent is set, adding and removing views in the collection synchronizes their elements in the parent element.

Parameters

elementOrDocFragment : HTMLElement | DocumentFragment

A new parent element or document fragment.

Returns

void

Stops delegating events. It can be used at different levels:

• To stop delegating all events.
• To stop delegating a specific event to all emitters.
• To stop delegating a specific event to a specific emitter.

Parameters

[ event ] : string

The name of the event to stop delegating. If omitted, stops it all delegations.

[ emitter ] : Emitter

(requires event) The object to stop delegating a particular event to. If omitted, stops delegation of event to all emitters.

Returns

void

Stops listening for events. It can be used at different levels:

• To stop listening to a specific callback.
• To stop listening to a specific event.
• To stop listening to all events fired by a specific object.
• To stop listening to all events fired by all objects.

Parameters

[ emitter ] : Emitter

The object to stop listening to. If omitted, stops it for all objects.

[ event ] : string

(Requires the emitter) The name of the event to stop listening to. If omitted, stops it for all events from emitter.

[ callback ] : Function

(Requires the event) The function to be removed from the call list for the given event.

Returns

void

This method renders a new view added to the collection.

If the parent element of the collection is set, this method also adds the view's element as a child of the parent in DOM at a specified index.

Note: If index is not specified, the view's element is pushed as the last child of the parent element.

Parameters

view : View

A new view added to the collection.

[ index ] : number

An index the view holds in the collection. When not specified, the view is added at the end.

Returns

void

Fired when an item is added to the collection.

Parameters

eventInfo : EventInfo

An object containing information about the fired event.

item : T

The added item.

index : number

An index where the addition occurred.

Fired when the collection was changed due to adding or removing items.

Parameters

eventInfo : EventInfo

An object containing information about the fired event.

data : CollectionChangeEventData<T>

Changed items.

Fired when an item is removed from the collection.

Parameters

eventInfo : EventInfo

An object containing information about the fired event.

item : T

The removed item.

index : number

Index from which item was removed.