can

<!DOCTYPE html>  <html lang="en"> <head> <meta charset="utf-8"> <title>CanJS - can-define/list/list</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" type="text/css" href="../../static/bundles/bit-docs-site/static.css"> <link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="/docs/images/canjs_favicon.ico"> <link rel="apple-touch-icon" sizes="57x57" href="../../../docs/images/canjs_favicon_57x57.png"> <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../../docs/images/canjs_favicon_57x57.png"> <link rel="apple-touch-icon" sizes="72x72" href="../../../docs/images/canjs_favicon_72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="../../../docs/images/canjs_favicon_114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="../../../docs/images/canjs_favicon_128x128.png"> <link rel="apple-touch-icon" sizes="144x144" href="../../../docs/images/canjs_favicon_144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="../../../docs/images/canjs_favicon_152x152.png"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent"> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-2302003-11', 'auto'); ga('send', 'pageview'); </script> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger"/> <label for="nav-trigger">Menu</label> <div id="everything"> <div id="left" class="column"> <div class="top-left"> <div class="brand"> <div class="logo"> <a href="../../../index.html" alt="CanJS"></a> <div class="dropdown project-dropdown"> <a href="https://donejs.com/">DoneJS</a> <a href="http://stealjs.com/">StealJS</a> <a href="http://jquerypp.com/">jQuery ++</a> <a href="https://funcunit.com/">FuncUnit</a> <a href="http://documentjs.com/">DocumentJS</a> </div> </div> <div class="version"> <div class="version-number"> 3.0.0 </div> <div class="dropdown version-dropdown"> <a href="https://v2.canjs.com">2.3.27</a> </div> </div> </div> <div class="search-bar"> <p>   </p> </div> </div> <div class="bottom-left"> <div class="social-side-container"> <ul class="social-side"> <li> <a class="header-mobile github" href="https://github.com/canjs/canjs" target="_blank"><img class="social-icon-small" src="../../../docs/images/github.png">Github</a> </li> <li> <a class="header-mobile twitter" href="https://twitter.com/canjs" target="_blank"><img class="social-icon-small" src="../../../docs/images/twitter.png">Twitter</a> </li> </ul> <ul class="social-side"> <li> <a class="header-mobile" href="https://gitter.im/canjs/canjs" target="_blank">Chat</a> </li> <li> <a class="header-mobile" href="http://forums.donejs.com/c/canjs" target="_blank">Forum</a> </li> </ul> </div> <ul> <li class=" "> <a class="page" href="../../guides.html" title="Welcome to CanJS! These guides are here to help you develop and improve your relationship with CanJS. After all, picking a JavaScript framework is a commitment. We want CanJS to be the framework you marry. This page helps you know how advance through the different stages of this relationship:"> Guides </a> </li> <li class=" parent expanded"> <a class="page" href="../../can-core.html" title="The best, most hardened and generally useful libraries in CanJS."> Core </a> <ul> <li class=" "> <a class="module" href="../../can-component.html" title="Create a custom element that can be used to manage widgets or application logic."> can-component </a> </li> <li class=" "> <a class="module" href="../../can-compute.html" title="Create an observable value."> can-compute </a> </li> <li class=" "> <a class="module" href="../../can-connect.html" title="can-connect provides persisted data middleware. Use it to assemble powerful model layers for any JavaScript project."> can-connect </a> </li> <li class=" "> <a class="module" href="../../can-define.html" title="Exports the define method that defines observable properties and their behavior on a prototype object."> can-define </a> </li> <li class="current parent expanded"> <a class="module" href="list.html" title="Create observable lists."> can-define/list/list </a> <ul> <li> <span>events</span> <ul> <li class=" "> <a class="typedef" href="list/AddEvent.html" title="Event fired when items are added to the list."> add </a> </li> <li class=" "> <a class="typedef" href="list/LengthEvent.html" title="Event fired when items are added or removed from the list."> length </a> </li> <li class=" "> <a class="typedef" href="list/PropertyNameEvent.html" title="Event fired when a property on the list changes values."> propertyName </a> </li> <li class=" "> <a class="typedef" href="list/RemoveEvent.html" title="Event fired when items are removed from the list."> remove </a> </li> </ul> </li> <li> <span>prototype</span> <ul> <li class=" "> <a class="function" href="list.prototype.concat.html" title="Merge many collections together into a DefineList."> concat </a> </li> <li class=" "> <a class="function" href="list.prototype.filter.html" title="Filter a list to a new list of the matched items."> filter </a> </li> <li class=" "> <a class="function" href="list.prototype.forEach.html" title="Call a function for each element of a DefineList."> forEach </a> </li> <li class=" "> <a class="function" href="list.prototype.get.html" title="Gets an item or all items from a DefineList."> get </a> </li> <li class=" "> <a class="function" href="list.prototype.indexOf.html" title="Look for an item in a DefineList."> indexOf </a> </li> <li class=" "> <a class="function" href="list.prototype.join.html" title="Join a DefineList's elements into a string."> join </a> </li> <li class=" "> <a class="function" href="list.prototype.map.html" title="Map the values in this list to another list."> map </a> </li> <li class=" "> <a class="function" href="list.prototype.on.html" title="Add event handlers to a list."> on </a> </li> <li class=" "> <a class="function" href="list.prototype.pop.html" title="Remove an element from the end of a DefineList."> pop </a> </li> <li class=" "> <a class="function" href="list.prototype.push.html" title="Add elements to the end of a list."> push </a> </li> <li class=" "> <a class="function" href="list.prototype.replace.html" title="Replace all the elements of a DefineList."> replace </a> </li> <li class=" "> <a class="function" href="list.prototype.reverse.html" title="Reverse the order of a DefineList."> reverse </a> </li> <li class=" "> <a class="function" href="list.prototype.serialize.html" title="Returns the a serialized version of this list."> serialize </a> </li> <li class=" "> <a class="function" href="list.prototype.set.html" title="Sets an item or property or items or properties on a list."> set </a> </li> <li class=" "> <a class="function" href="list.prototype.shift.html" title="Remove an item from the front of a list."> shift </a> </li> <li class=" "> <a class="function" href="list.prototype.slice.html" title="Make a copy of a part of a DefineList."> slice </a> </li> <li class=" "> <a class="function" href="list.prototype.sort.html" title="Sort the properties of a list."> sort </a> </li> <li class=" "> <a class="function" href="list.prototype.splice.html" title="Insert and remove elements from a DefineList."> splice </a> </li> <li class=" "> <a class="function" href="list.prototype.unshift.html" title="Add items to the beginning of a DefineList."> unshift </a> </li> <li class=" "> <a class="property" href="list.prototype.wildcard.html" title="Define default behavior for all properties and items in the list. Use list.prototype.itemsDefinition to define the default type of items in the list."> * </a> </li> <li class=" "> <a class="property" href="list.prototype.wildcardItems.html" title="Define default behavior for items in the list."> # </a> </li> </ul> </li> <li> <span>static</span> <ul> <li class=" "> <a class="function" href="list.extend.html" title="Define a custom list type."> extend </a> </li> </ul> </li> </ul> </li> <li class=" "> <a class="module" href="../map/map.html" title="Create observable objects."> can-define/map/map </a> </li> <li class=" "> <a class="function" href="../../can-route.html" title="Manage browser history and client state by synchronizing the window.location.hash with a map."> can-route </a> </li> <li class=" "> <a class="module" href="../../can-route-pushstate.html" title="Changes can-route to use pushstate to change the window's pathname instead of the hash. var route = require("can-route-pushstate"); route("{page}", { page: "home" }); route.ready(); route.attr("page", "user"); location.pathname; // -> "/user""> can-route-pushstate </a> </li> <li class=" "> <a class="module" href="../../can-set.html" title="can-set is a utility for comparing sets that are represented by the parameters commonly passed to service requests."> can-set </a> </li> <li class=" "> <a class="module" href="../../can-stache.html" title="Live binding Mustache and Handlebars-compatible templates."> can-stache </a> </li> <li class=" "> <a class="module" href="../../can-stache/helpers/route.html" title="Adds stache helpers that use can-route."> can-stache/helpers/route </a> </li> <li class=" "> <a class="module" href="../../can-stache-bindings.html" title="Provides template event, one-way, and two-way bindings."> can-stache-bindings </a> </li> </ul> </li> <li class=" "> <a class="page" href="../../can-ecosystem.html" title="Useful libraries that extend or add important features to the core collection."> Ecosystem </a> </li> <li class=" "> <a class="page" href="../../can-infrastructure.html" title="Utility libraries that power the core and ecosystem collection."> Infrastructure </a> </li> <li class=" "> <a class="page" href="../../can-legacy.html" title="Former libraries that we still accept patches for, but are not under active development."> Legacy </a> </li> </ul> </div> </div> <div id="right" class="column"> <div class="top-right"> <div class="top-right-top"> <ul class="top-right-bitovi"> <li class="dropdown"> <a href="http://bitovi.com" class="bitovi icon-bits">Bitovi</a> <ul class="dropdown-menu"> <li><a href="http://bitovi.com">Bitovi.com</a></li> <li><a href="http://bitovi.com/blog/">Blog</a></li> <li><a href="http://bitovi.com/consulting/">Consulting</a></li> <li><a href="http://bitovi.com/training/">Training</a></li> <li><a href="http://bitovi.com/open-source/">Open Source</a></li> </ul> </li> </ul> <div class="brand"> <div class="logo"> <a href="../../../index.html" alt="CanJS"></a> </div> </div> <ul class="top-right-links"> <li> <a href="https://gitter.im/canjs/canjs">Chat</a> </li> <li> <a href="http://forums.donejs.com/c/canjs">Forum</a> </li> <li> <a class="github-button nav-social" href="https://github.com/canjs/canjs" data-count-href="/canjs/canjs/stargazers" data-count-api="/repos/canjs/canjs#stargazers_count">Star</a> </li> <li> <a href="https://twitter.com/canjs" class="twitter-follow-button nav-social" data-show-count="true" data-show-screen-name="false">Follow @canjs</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> </li> </ul> </div> <div class="breadcrumb"> <li><a href="../../../index.html">CanJS</a></li> / <li><a href="../../can-core.html">Core</a></li> / <li><a href="list.html">can-define/list/list</a></li> <li class="breadcrumb-dropdown">/ <a> On this page</a> <ul class="on-this-page"></ul> </li> <div class="nav-toggle" title="Back to top"></div> </div> </div> <div class="bottom-right"> <article> <section class="title"> <div class="page-type"> <h1>can-define/list/list</h1> <div>module</div> </div> <section class="description"> <p>Create observable lists.</p> </section> </section> <section class="on-this-page-table"> </section> <section class="title-footer"> <ul class="title-links">  <li><a href="//github.com/canjs/canjs/tree/v3.0.0/node_modules/can-define/list/docs/define-list.md">source</a></li>   </ul> </section> <div class="signature"> <h2 class="signature-title"> <code>new DefineList([items])</code> </h2> <p>Creates an instance of a DefineList or an extended DefineList with enumerated properties from <code>items</code>.</p> <pre><code class="language-js">var DefineList = require("can-define/list/list"); var people = new DefineList([ { first: "Justin", last: "Meyer" }, { first: "Paula", last: "Strozak" } ]) </code></pre> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>items</b> <code>{Array}</code>: <p>An array of items to seed the list with.</p> </li> </ol> </div> <div class="returns"> <h3 class="returns-title">Returns</h3> <p> <code>{<a href="list.html" title="Create observable lists.">can-define/list/list</a>}</code>: <p>An instance of <code>DefineList</code> with the values from <em>items</em>.</p> </p> </div> </div> <section class="body"> <h2>Use</h2> <p>The <code>can-define/list/list</code> module exports a <code>DefineList</code> constructor function. It can be used with <code>new</code> to create observable lists that behave very similar to <code>Array</code>s. For example:</p> <pre><code class="language-js">var list = new DefineList(["a","b", "c"]); list[0] //-> "a"; list.push("x"); list.pop() //-> "x" </code></pre> <p>It can also be extended to define custom observable list types with <a href="list.extend.html" title="Define a custom list type.">extend</a>. For example, the following defines a <code>StringList</code> type where every item is converted to a string by specifying the <a href="list.prototype.wildcardItems.html" title="Define default behavior for items in the list.">items definition</a> <code>(#)</code>:</p> <pre><code class="language-js">var StringList = DefineList.extend({ "#": "string" }); var 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" </code></pre> <p>Non-numeric properties can also be defined on custom DefineList type. The following defines a <code>completed</code> property that returns the completed todos:</p> <pre><code class="language-js">var TodoList = DefineList.extend({ "#": Todo, get completed(){ return this.filter({complete: true}) } }); var todos = new TodoList([{complete: true}, {complete:false}]); todos.completed.length //-> 1 </code></pre> <p>Finally, DefineMap instances are observable, so you can use the <a href="../../can-event.html" title="Add event functionality into your objects. The canEvent object provides a number of methods for handling events in objects. This functionality is best used by mixing the canEvent object into an object or prototype. However, event listeners can still be used even on objects that don't include canEvent. All methods provided by canEvent assume that they are mixed into an object -- this should be the object dispatching the events.">can-event</a> methods to listen to its <a href="list/AddEvent.html" title="Event fired when items are added to the list.">add</a>, <a href="list/LengthEvent.html" title="Event fired when items are added or removed from the list.">length</a>, <a href="list/RemoveEvent.html" title="Event fired when items are removed from the list.">remove</a>, and <a href="list/PropertyNameEvent.html" title="Event fired when a property on the list changes values.">propertyName</a> events:</p> <pre><code class="language-js">var 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 </code></pre> </section> <script type="text/javascript"> var docObject = {"name":"can-define/list/list","type":"module","src":{"path":"node_modules/can-define/list/docs/define-list.md"},"description":"Create observable lists. \n","types":[{"type":"function","returns":{"types":[{"type":"undefined"}]},"params":[]}],"parent":"can-core","alias":"can.DefineList","inherits":"can.Construct","signatures":[{"code":"new DefineList([items])","description":"\n\nCreates an instance of a DefineList or an extended DefineList with enumerated properties from `items`.\n\n```js\nvar DefineList = require(\"can-define/list/list\");\n\nvar people = new DefineList([\n { first: \"Justin\", last: \"Meyer\" },\n { first: \"Paula\", last: \"Strozak\" }\n])\n```\n","params":[{"types":[{"type":"Array","options":[]}],"optional":true,"name":"items","description":"An array of items to seed the list with."}],"returns":{"types":[{"type":"can-define/list/list"}],"description":"An instance of `DefineList` with the values from _items_.\n"}}],"_curParam":{"types":[{"type":"Array","options":[]}],"optional":true,"name":"items","description":"An array of items to seed the list with."},"_curReturn":{"types":[{"type":"can-define/list/list"}],"description":"An instance of `DefineList` with the values from _items_.\n"},"comment":" ","pathToRoot":"../../.."}; </script> </article> <footer><p>CanJS is part of <a href="http://donejs.com" target="_blank">DoneJS</a>. Created and maintained by the core <a href="https://donejs.com/About.html#section=section_Team" target="_blank">DoneJS team</a> and <a href="http://bitovi.com" target="_blank">Bitovi</a>. <strong>Currently 3.0.0.</strong></p></footer> </div> </div> </div> <script> steal = { instantiated: { "bundles/bit-docs-site/static.css!$css" : null } }; </script> <script type='text/javascript' data-main="bit-docs-site/static" src="../../static/node_modules/steal/steal.production.js"></script> <script async defer src="https://buttons.github.io/buttons.js"></script> </body> </html>