Class ViewCollection<TView>

Iterable interface.

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.

Adds multiple items into the collection.

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

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'
Copy

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
Copy

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'
Copy

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
Copy

Note: #clear can be used to break the binding.

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

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

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

Performs the specified action for each item in the collection.

Gets an item by its ID or index.

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

Returns a Boolean indicating whether the collection contains an item.

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