Many of the data operations on Zing data objects will return a list of keys. This component is designed to convert such a list of keys into a list of user interface components for display.
Although this component was designed to handle lists of Zing object keys, in actuality it can handle any list of strings that have meaning in your application. It is your code that translates a key string into something to be displayed or edited.
Parameters
- keyListF: ()=>string[] – the keyListF is a function that will return a list of key strings. This is invoked every time the component is rerendered. This allows the list of keys to dynamically change, based on the data.
Attributes
- .itemView( itemViewF:(objKey:string)=>ZUI) – the itemViewF is a function that accepts an object key and returns a ZUI component that displays that object. This is only called when a new key not known to the component is encountered. When the same key is found in the keyList, then the ZUI component for that key is reused. The components may be reordered. If the contents of the specified object change, then those changes should be reflected in updates to the ZUI component itself.
- .sort( sortF:(key1:string,key2:string)=>number) – this provides a function (sortF) that will compare two keys (or the contents of their objects) to determine a sort order. If key1 and key2 are equal in the desired sort order then 0 should be returned. If key1 should appear before key2, then a negative number should be returned. Otherwise a positive number should be the result. Usually it is not the keys being compared but the objects referenced by those keys.
Examples
new KeyListUI( ()=>{
return Dogs.cFind( { name:"Rover" } ); // keys
}).sort((key1:string, key2:string)=>{
let d1=Dogs.cGet(key1);
let d2=Dogs.cGet(key2);
let w1= d1.getWeight();
let w2= d2.getWeight();
return w1-w2; // sort by weight, lightest first
});
Styling
- KeyListUI – default styling class