intercellular / cell

A self-driving web app framework
https://www.celljs.org
MIT License
1.51k stars 94 forks source link

Nesting components #149

Open mdings opened 7 years ago

mdings commented 7 years ago

I've got an issue when nesting components. It probably has something to do with the way rendering occurs. Example can be found here: https://jsfiddle.net/dfmkfmyb/

When clicking on the blue div, a new div will be appended to the parent using the same component. This works indefinitely. However when clicking the topmost div after having created a few children within a div, the list re-renders and only keeps one level of children components.

l0zxnnenhr

gliechtenstein commented 7 years ago

@mdings hmm isn't this the intended behavior? As far as i can tell from the code, you're adding an empty object {} recursively to this._items for each level.

which means, in the last step where you go back to the top most div and click, the this._items is [{}] so when it adds another {}, it ends up with [{}, {}]. You can try clicking more and more on the same level and will observe that's what's happening.

I forked your code here https://jsfiddle.net/b8txsqLz/1/ to demonstrate this. The tooltip shows the content of this_items when you hover over a div.

mdings commented 7 years ago

Yes, but the items are always pushed to the element itself, hence the stopPropagation method. So the items data for a child component can contain multiple objects that are being flushed when an object is added to the top items array.

In any case, what I want to achieve is to be able to build up some sort of navigation tree. So I would like to be able to append an item to the root of the array while keeping the rest of the generated tree intact. Hope that makes sense.

gliechtenstein commented 7 years ago

In this case I can think of two options:

  1. Keep a global tree structure you reference from.
  2. Keep it decentralized and directly utilize the $components attribute. (Example https://jsfiddle.net/b8txsqLz/4/)

I prefer the second approach, which is why I only tried the second. But I'm sure you can come up with a solution that implements the centralized approach. Hope this helps!

mdings commented 7 years ago

Ah I see what you're doing there. I don't really understand we you're not needing the $update function though?