Module "klist"

Const $klist

• $klist<T>(src: ISubscribable<T[]>, tag: string, attribs: any, childCtor: Fn<T, any>, keyFn?: Fn2<T, number, NumOrString>): IComponent<T[]>

• Similar to $list, however additionally uses keying to establish list item identities and uses them in a more complex diffing algorithm to avoid re-initialization of list items if they've been re-ordered or changed positions due to removal/insertion of other items in the list.

  remarks

  The given keyFn is used to obtain a unique key value for each list item obtained from the reactive arrays obtained from src.

  example

  const items = reactive([{id: "a"}, {id: "b"}, {id: "c"}]);
  
  $klist(
    // data source (rstream subsribable)
    items,
    // outer list element & attribs
    "ul",
    { class: "list red" },
    // list item component constructor
    (x) => ["li", {}, x.id],
    // key function
    (x) => x.id
  ).mount(document.body);
  
  // update list
  items.next([{id: "b"}, {id: "d"}, {id: "c"}]);

  Type parameters

  • T

  Parameters

  • src: ISubscribable<T[]>

  • tag: string

  • attribs: any

  • childCtor: Fn<T, any>

  • Optional keyFn: Fn2<T, number, NumOrString>

  Returns IComponent<T[]>