I am trying to use Ember to render a directed acyclic graph. In Backbone, I was able to render the child component views (the nodes), to the DOM, get their dimensions (.height(), .width()) and then use that information in a graph layout algorithm, then re-render the parent component in such a way that all child components would get their new (x, y) positions and transition into place. Getting the height/width into the layout algorithm is important because without that information, it can't provide adequate space for the nodes to not overlap. Letting the DOM provide that information is nice, because it allows the graph nodes to be formatted by the browser itself, using good ol' HTML layout.
Ember seems like a natural fit for doing something like this, but here's my problem. I have the following:
{{parent-component nodes=nodes}}
{{node-layer nodes=nodes }}
...
{{#each nodes as |node|}}
{{node-view height=node.height width=node.width position=node.position}}
{{/each}}
...
{{/node-layer}}
{{/parent-component}}
The only time I can get the leaf component's (the node's) height/width is on a didInsertElement
or didRender
call in the node component. That works fine. There are a variety of ways I can pass this information back up to the parent component and into my layout algorithm. The problem is that any method of re-rendering the parent component, such that the new positions will trickle down to the child components, will happen as part of the render hook cycle, and Ember will complain and/or I will completely freeze the browser in and endless render loop.
Can anything think of a pattern using Ember to do what I'm trying to do? One that doesn't involve fighting the framework or some hack?
Aucun commentaire:
Enregistrer un commentaire