Quick Tip - Collections in EsriJS Beta 4

I’ve talked a lot about some cool features of the ArcGIS API for JavaScrtipt beta 4. I think Accessors are a great component of the new API, which has lots of applications. One other really interesting module in the API is the esri/core/Collection.

You can think of Collection as a store for Arrays, with some sugar on top. It allows you to move items around, remove them from the collection, add individual items or groups of items. It also emits events when the collection has changed. Hmm, this is starting to look like an AS3 ArrayList.

This opens up some cool things you can do in your app.

Let’s say you have a list of items you want to filter with an input. I’ve done similar samples to test stuff out in the past.

For this case, we’ll keep a source collection, to use it as a cache of the original data. Then we’ll create another collection that is in charge of drawing the elements on the page. When the user types something in the input, we can filter the cache and update the collection. The collection will listen for changes and simply redraw the whole list.

gist

You can see what this looks like in this sample here. JS Bin on jsbin.com

So dig into the beta API a bit and play around in some of the darker corners. You just might find some gems.

By the way, I’m gathering interest for an Intro to ArcGIS JS API 4 book, please take a look and sign up if interested.