Open mdings opened 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.
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.
In this case I can think of two options:
$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!
Ah I see what you're doing there. I don't really understand we you're not needing the $update function though?
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.