Class: CollectionComponent

CollectionComponent(dataObjectopt, optionsopt)

CollectionComponent provides a generic list UI for DataCollections.

Constructor

new CollectionComponent(dataObjectopt, optionsopt)

Parameters:
Name Type Attributes Default Description
dataObject DataObject <optional>
 null
options Object <optional>
 {}
Properties
Name Type Attributes Default Description
itemComponent Component <optional>
 DefaultItemComponent a Component class used to render each item in this list
itemOptions Object <optional>
 a set of options to pass to each item Component
onClick CollectionComponent~onClick <optional>
 a function to call with the dataObject whose item Component is clicked
Source:
To Do:
  • Add rearrangement via drag and drop
  • Add pagination support once DataCollection supports it
Examples

Use the DefaultItemComponent

const myCollection = new DataCollection(...snip...)
const collectionComponent = new CollectionComponent(myCollection)

Use a custom item Component

const myCollection = new DataCollection(...snip...)
class CustomItemComponent extends Component {
	constructor(dataObject=null, options={}) {
		// Set up your item UI here
	}
}
const collectionComponent = new CollectionComponent(myCollection, {
	itemComponent: CustomItemComponent, // the class, not an instance
	itemOptions: { someKey: 'someValue' } // passed as options to item component constructors
})

Responding to clicks on items

const myCollection = new DataCollection(...snip...)
const collectionComponent = new CollectionComponent(myCollection, {
	onClick: (dataObject) => {
		// Do something with the DataObject (probably a DataModel) whose item has been clicked
	}
})

Methods

at(index) → (nullable) {Component}

Parameters:
Name Type Description
index int
Source:
Returns:
indexed `Component` or `null` if index is out of bounds
Type
Component

componentForDataObject(dataObject) → (nullable) {Component}

Parameters:
Name Type Description
dataObject DataObject
Source:
Returns:
Type
Component

filter(filterFn)

Call this to change whether item Components are show or hidden based on the result of a function. A common pattern is to listen to Collection events like fetched or reset and then re-run a filter.
Parameters:
Name Type Default Description
filterFn CollectionComponent~filter null
Source:
Example
const collectionComponent = new CollectionComponent(...snip...)

	// Only show items for DataModels with an 'active' field that is true
	collectionComponent.filter((dataObject) => {
		// Assuming that the dataObject is a DataModel and not a sub-DataCollection
		return dataObject.get('active') === true
	})

	// Show all items by passing a null filter
	collectionComponent.filter(null)

Type Definitions

filter(model) → {boolean}

Parameters:
Name Type Description
model DataObject
Source:
Returns:
true if the DataObject's item Component should be shown
Type
boolean

onClick(obj)

Parameters:
Name Type Description
obj DataObject
Source: