Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nesting components #149

Open
mdings opened this issue Jul 13, 2017 · 4 comments
Open

Nesting components #149

mdings opened this issue Jul 13, 2017 · 4 comments

Comments

@mdings
Copy link

mdings commented Jul 13, 2017

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
Copy link
Contributor

@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
Copy link
Author

mdings commented Jul 14, 2017

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
Copy link
Contributor

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
Copy link
Author

mdings commented Jul 19, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants