Patterns for updating cells when class properties are set or are changed

Community Help
1

I’ve been experimenting with patterns for updating cells when class properties are changed. For example, let’s say we have a DataStore class that keeps track of a total, with getter and setter methods.

class DataStore {
  constructor(firstcount) {
   // object properties cannot be "mutable"
    this._total = firstcount;
    this._list = [];
  }
  get total () {
    return this._total;
  }
  set update(count) {
    const newtotal = this._total + count;
    this._total = newtotal;
  }
  dispatchEvent(event) {
    // const p = Promise.resolve();
    // this._list.forEach(l => p.then(l));
  }
}

I’ve commented out the dispatchEvent method, borrowed from several notebooks from Mike..

What is the ideal pattern for updating a cell when DataStore.total changes?

I’ve tried a few patterns:

  • A cell that wraps DataStore.total in a generator that continually yields the value
  • The dispatchEvent pattern that Mike uses, which uses viewof and input event listeners to trigger updates.*
  • Include a mutable in the cell with where DataStore.total should show the most recent value. Continually update that mutable variable’s value to trigger that cell refresh (and output of the most recent Class property value).
  • Write event dispatch events when the property is set but without using viewof. An event callback updates a mutable variable also present in the cells to be updated with the most recent DataStore.total.

*My issue with this pattern is it seems to trash at the ontological boundaries of a view input as a way to dispatch events. Object property updates seem more consistent with the generator or mutable patterns than viewof, which Mike and others have used for d3.drag interactions, which are consistent as “inputs.”

None of the answers I’ve come to is all that satisfying. I’m wondering if something like the mutable keyword for class properties or something like viewof for class setters might make sense. Suggestions very appreciated.

3 Likes