AtomItemsControl is base class for all multi item controls such as AtomComboBox, AtomListBox etc. AtomItemsControl basically provides multi items management and provides templating mechanism for children. Each child is associated with one item in items array. AtomItemsControl provides selection mechanism including property value selection.
AtomItemsControl does not provide any styles for children, it only provides logic for items manipulation such as filter, sort, collection change notification and updates.
Most complicated UI objects are cascaded items controls, for example, Country Combo Box and corresponding State Combo Box, and managing two way binding between object properties. AtomItemsControl selection management is carefully adjusted to ignore "undefined" values and properly cascades selection without causing recursive endless binding updates.
AtomItemsControl caches value of "value" property, which is used in selecting item or items after the item collection was loaded from the remote source. This may cause little unexpected behaviour, but this is by design to support selecting default or selected items even before item collection was loaded.
Every item of AtomItemsControl is created with a new Scope, so each item has its own private scope, and scope is managed by Atoms.js. This ensures scope bindings templates to remain private with each item and they do not conflict with one another. To refer to global scope, your binding must use $appScope instead of just $scope.
Scope provides additional properties as follow,
In above example, we have following bindings,
To make AtomItemsControl look like table (With column headers etc), you have to mark an element as itemsPresenter which will contain itemTemplate. Here tbody element becomes itemsPresenter (an element which holds the items) and its immediate child becomes itemTemplate.
In this example, you can see that AtomToggleButtonBar is named as "categoryList" and it's selected value is displayed in last column, every item is in its own scope so we can bind properties of control with name.
AtomItemsControl takes care of HTML Element virtualization, it creates only visible nodes, however this is only possible if explicit width/height of parent Element is specified and explicit width/height of item template is also specified. All you have to do is, set ui_virtualize property to true.