DDAU with component APIs

Design
1

Hello!

I’m struggling with the API for one of my components and am trying to figure out what patterns in Ember I can use. My component is a TreeSelectComponent so think of jstree with the checkbox plugin allowing for multiple node selections. Currently the way I’ve handled node selection is:

  1. User selects or deselects a node.
  2. Tree component calculates whether or not any additional nodes need selecting or deselecting and gathers those up.
  3. Send off an action with both the node that was selected and the current set of selected nodes.
  4. Parent component can then take these selected nodes and put them in an array which trickles back down and the appropriate “selected” states are rendered.

My trouble lies in exposing an appropriate API for this component. Imagine what happens when I want to programmatically select a single node. In a simple scenario of DDAU you would just push this into your list of selected items. Here though selecting a node has side effects. So something like:

  1. Parent component pushes or removes a node into list
  2. Tree component detects change and runs calculations to select or deselect other nodes
  3. Tree component sends up an actions with the new changes, i.e. all the currently selected nodes.
  4. Parent component updates list of selected list which trickles down and the selected states are rendered.

The issue I’m running into is it feels like there’s too many cycles happening here. In step 4 you would trigger unnecessary work in the tree component once the new list of selected nodes trickles down only to find that everything’s fine.

Now for my question. Am I thinking of this in the right way or is there some pattern in Ember that I’m missing? I know someone built an awesome looking wrapper around jstree found here and it appears they register an object that acts as a pass through for interacting with the tree widget. This to me however doesn’t feel quite right in the pure Ember sense.

Thank you for reading!