List's with pre/post class (Feature)
flery opened this issue · comments
Often I try to implement a list with some kind of pre or post component. Since lists only can instantiate the normal item class, this will lead to wrapping the component inside another component ...
Container(Header, Actual List, Footer)
... and this in turn leads to creating a lot more dom nodes. Maybe this is out of scope and is more like an extended list class.
One option could be to create constructor function support instead of class parameter, which could choose which class to instantiate based on the data and index.
let list = new List([], (item,index) => { return index== 0 ? new Component() : new OtherComponent() })
I had same problem before.
at that time I solved it by monkey patching update method of list component.
function Container(header, list, footer) {
this.header = header;
this.list = list;
this.footer = footer;
this.el = this.list;
const oldListUpdate = this.list.update;
this.list.update = (...args) => {
oldListUpdate.bind(this.list)(...args);
/*
mount(this.list, this.header, ) // something prepend code, sorry for uncompleted code
*/
mount(this.list, this.footer);
};
this.update = this.list.update;
}if you are struggle with unnecessary DOM and CSS, check display: contents
I think It's better extending current List class, not modifying it.
Second argument of the list -function can also be a factory function. This function receives initData, itemData, index, listData as arguments.
Since you get both the index and data as an argument for the factory, you can return different components from the factory based on the position or item data.
