WICG / virtual-scroller

Other
2k stars 83 forks source link

Consider a nice way of creating a "mapping" ItemSource #118

Closed domenic closed 5 years ago

domenic commented 6 years ago

Right now if you want to have an ItemSource that converts your "model" into your "view model" you'd do something like this:

scroller.itemSource = new ItemSource({
  item(index) {
    return {
      index,
      avatarURL: avatarBaseURL + contacts[index].id,
      name: contacts[index].name
    };
  },
  getLength() {
    return contacts.length;
  }
});

We may want to make this easier, so you could write something like

scroller.itemSource = ItemSource.fromArrayWithMapping(
  contacts,
  contact => ({
    index,
    avatarURL: avatarBaseURL + contacts[index].id,
    name: contacts[index].name
  })
);

We should not add this now, as it gets us deep into the model/view model management world. But I wanted to note it for later, in case we see this as a common pattern, so we have something to refer to.

Also, as noted in #103, this would likely see a lot more use if we end up with template instantiation integration. Or maybe if we did something like #101.

kenchris commented 6 years ago

Array.from, as an inspiration also allows mapping by default as second argument

http://exploringjs.com/es6/ch_arrays.html#sec_new-static-array-methods

So I guess just calling it fromArray ie fromArray(array, mapFunc?, thisArg?) would suffice.

rakina commented 5 years ago

Closing this as this is related to the old virtual-scroller concept that uses ItemSource. The new approach outlined in the explainer no longer uses this concept.