Bitovi

Array

Create observable Array instances or types.

`new observe.Array([items])`

Create an instance of an observable array.

import observe from "can-observe";

const hobbies = new observe.Array( [ "JS", "Reading" ] );

`class extends observe.Array {...}`

Extend and create your own Array type:

import observe from "can-observe";

class TodoList extends observe.Array {
    get active() {
        return this.filter( function( todo ) {
            return todo.complete === false;
        } );
    }
}

Getter properties like active above are computed. Meaning that if they are bound subsequent reads are not re-evaluated.

Mixed in methods and properties

Instances of observe.Array have all methods and properties from can-event-queue/map/map:

addEventListener - Register an event handler to be called when an event is dispatched.
@can.getWhatIChange - Return observables whose values are affected by attached event handlers
@can.isBound - Return if the observable is bound to.
@can.offKeyValue - Unregister an event handler to be called when an event is dispatched.
@can.onKeyValue - Register an event handler to be called when a key value changes.
dispatch - Dispatch event and key binding handlers.
listenTo - Listen to an event and register the binding for simplified unbinding.
off - A shorthand method for unbinding an event.
on - A shorthand method for listening to event.
one - Register an event handler that gets called only once.
removeEventListener - Unregister an event handler to be called when an event is dispatched.
stopListening - Stops listening for registered event handlers.

Example:

class MyArray extends observe.Array {

}

const arrayInstance = new MyArray( [] );

canReflect.onPatches( arrayInstance, function( patches ) { /* ... */ } );

Mixed-in type methods and properties

Extended observe.Array constructor functions have all methods and properties from can-event-queue/type/type:

@can.offInstanceBoundChange - Stop listening to when an instance's bound status changes.
@can.offInstancePatches - Stop listening to patch changes on any instance.
@can.onInstanceBoundChange - Listen to when any instance is bound for the first time or all handlers are removed.
@can.onInstancePatches - Listen to patch changes on any isntance.

Example:

class MyArray extends observe.Array {

}

canReflect.onInstancePatches( MyArray, function( instance, patches ) { /* ... */ } );

Use Cases

observe.Array is used to make observable arrays commonly used by the model layer.

Models

Use observe.Array to create observable arrays for use with can-connect. The following creates a simple TodoList type:

import observe from "can-observe";
import baseMap from "can-connect/can/base-map/base-map";

class Todo extends observe.Object { /* ... */ }

class TodoList extends observe.Array {
    get active() {
        return this.filter( function( todo ) {
            return todo.complete === false;
        } );
    }
    get complete() {
        return this.filter( function( todo ) {
            return todo.complete === true;
        } );
    }
    get allComplete() {
        return this.length === this.complete.length;
    }
    get saving() {
        return this.filter( function( todo ) {
            return todo.isSaving();
        } );
    }
    updateCompleteTo( value ) {
        this.forEach( function( todo ) {
            todo.complete = value;
            todo.save();
        } );
    }
    destroyComplete() {
        this.complete.forEach( function( todo ) {
            todo.destroy();
        } );
    }
}

baseMap( {
    url: "/api/todos",
    Map: Todo
} );

Note that active, complete, allComplete, and saving are made into can-observation-backed properties. Once bound, they will only update their value once one of their dependencies has updated.