DoneJS StealJS jQuery++ FuncUnit DocumentJS
4.3.0
5.0.0 3.13.1 2.3.35
  • About
  • Guides
  • API Docs
  • Community
  • Contributing
  • Bitovi
    • Bitovi.com
    • Blog
    • Design
    • Development
    • Training
    • Open Source
    • About
    • Contact Us
  • About
  • Guides
  • API Docs
    • Observables
      • can-bind
      • can-compute
      • can-debug
      • can-define
      • can-define/list/list
        • events
          • add
          • length
          • propertyName
          • remove
        • prototype
          • assign
          • assignDeep
          • concat
          • every
          • filter
          • forEach
          • get
          • indexOf
          • join
          • lastIndexOf
          • map
          • pop
          • push
          • reduce
          • reduceRight
          • replace
          • reverse
          • serialize
          • set
          • shift
          • slice
          • some
          • sort
          • splice
          • unshift
          • update
          • updateDeep
          • *
          • #
        • static
          • extend
      • can-define/map/map
      • can-define-backup
      • can-define-stream
      • can-define-stream-kefir
      • can-event-queue
      • can-kefir
      • can-list
      • can-map
      • can-map-define
      • can-observation
      • can-observation-recorder
      • can-observe
      • can-simple-map
      • can-simple-observable
      • can-stream
      • can-stream-kefir
      • can-value
    • Data Modeling
      • can-connect
      • can-connect-feathers
      • can-fixture
      • can-fixture-socket
      • can-ndjson-stream
      • can-set
    • Views
      • can-component
      • can-stache
      • can-stache-bindings
      • can-stache-converters
      • can-stache-route-helpers
      • can-view-autorender
      • can-view-callbacks
      • can-view-import
      • can-view-live
      • can-view-model
      • can-view-nodelist
      • can-view-parser
      • can-view-scope
      • can-view-target
      • react-view-model
      • react-view-model/component
      • steal-stache
    • Routing
      • can-deparam
      • can-param
      • can-route
      • can-route-hash
      • can-route-mock
      • can-route-pushstate
    • JS Utilities
      • can-assign
      • can-define-lazy-value
      • can-diff
      • can-globals
      • can-join-uris
      • can-key
      • can-key-tree
      • can-make-map
      • can-parse-uri
      • can-queues
      • can-string
      • can-string-to-any
      • can-util
      • can-zone
      • can-zone-storage
    • DOM Utilities
      • can-ajax
      • can-attribute-encoder
      • can-child-nodes
      • can-control
      • can-dom-data
      • can-dom-events
      • can-dom-mutate
      • can-event-dom-enter
      • can-event-dom-radiochange
      • can-fragment
    • Data Validation
      • can-define-validate-validatejs
      • can-validate
      • can-validate-interface
      • can-validate-legacy
      • can-validate-validatejs
    • Typed Data
      • can-cid
      • can-construct
      • can-construct-super
      • can-data-types
      • can-namespace
      • can-reflect
      • can-reflect-dependencies
      • can-reflect-promise
      • can-types
    • Polyfills
      • can-symbol
      • can-vdom
    • Core
    • Infrastructure
      • can-global
      • can-test-helpers
    • Ecosystem
    • Legacy
  • Community
  • Contributing
  • GitHub
  • Twitter
  • Chat
  • Forum
  • News
Bitovi

can-define/list/list

  • Edit on GitHub

Create observable lists.

new DefineList([items])

Creates an instance of a DefineList or an extended DefineList with enumerated properties from items.

import DefineList from "can-define/list/list";

const people = new DefineList( [
    { first: "Justin", last: "Meyer" },
    { first: "Paula", last: "Strozak" }
] );

Parameters

  1. items {Array}:

    An array of items to seed the list with.

Returns

{can-define/list/list}:

An instance of DefineList with the values from items.

Mixed-in instance methods and properties

Instances of DefineList 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:

const MyList = DefineList.extend( { "#": "string" } );

const listInstance = new MyList( [ "a", "b" ] );

listInstance.on( "length", function( event, newLength, oldLength ) { /* ... */ } );

Mixed-in type methods and properties

Extended DefineList 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:

const MyList = DefineList.extend( { "#": "string" } );

canReflect.onInstancePatches( MyList, function( instance, patches ) {

} );

Use

The can-define/list/list module exports a DefineList constructor function. It can be used with new to create observable lists that behave very similar to Arrays. For example:

const list = new DefineList( [ "a", "b", "c" ] );
list[ 0 ]; //-> "a";

list.push( "x" );
list.pop(); //-> "x"

It can also be extended to define custom observable list types with extend. For example, the following defines a StringList type where every item is converted to a string by specifying the items definition (#):

const StringList = DefineList.extend( {
    "#": "string"
} );

const strings = new StringList( [ 1, new Date( 1475370478173 ), false ] );

strings[ 0 ]; //-> "1"
strings[ 1 ]; //-> "Sat Oct 01 2016 20:07:58 GMT-0500 (CDT)"
strings[ 2 ]; //-> "false"

Non-numeric properties can also be defined on custom DefineList type. The following defines a completed property that returns the completed todos:

const TodoList = DefineList.extend( {
    "#": Todo,
    get completed() {
        return this.filter( { complete: true } );
    }
} );

const todos = new TodoList( [ { complete: true }, { complete: false } ] );
todos.completed.length; //-> 1

Finally, DefineList instances are observable, so you can use the can-event-queue/map/map methods to listen to its add, length, remove, and propertyName events:

const people = new DefineList( [ "alice", "bob", "eve" ] );

people.on( "add", function( ev, items, index ) {
    console.log( "add", items, index );
} ).on( "remove", function( ev, items, index ) {
    console.log( "remove", items, index );
} ).on( "length", function( ev, newVal, oldVal ) {
    console.log( "length", newVal, oldVal );
} );

people.pop(); // remove ["eve"] 2
// length 2 3

people.unshift( "Xerxes" ); // add ["Xerxes"] 1
// length 3 2

NOTE: Only changes made to indexed values using the list's set method will dispatch change events. 👍 defineList.set(0, 'newValue'); // will dispatch event 👎 defineList[0] = 'newValue'; // will NOT dispatch event

CanJS is part of DoneJS. Created and maintained by the core DoneJS team and Bitovi. Currently 4.3.0.

On this page

Get help

  • Chat with us
  • File an issue
  • Ask questions
  • Read latest news