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

tag root attributes out of sync #2280

Closed
fabien opened this issue Feb 28, 2017 · 8 comments
Closed

tag root attributes out of sync #2280

fabien opened this issue Feb 28, 2017 · 8 comments
Labels

Comments

@fabien
Copy link
Contributor

@fabien fabien commented Feb 28, 2017

  1. Describe your issue:

Please see the plnkr below, the values are not in sync. This is a contrived example, in my case I had an issue with something similar, where I had a data-id attribute to identify each looped item. I noticed that the data-id attributes were never updated when an item was removed from this.items, regardless of no-reorder.

  1. Can you reproduce the issue?

http://plnkr.co/edit/2jdhrRgDEZr3vJvVsXip?p=preview

The color applied to the looped tag itself is out of sync with the value displayed inside.

  1. On which browser/OS does the issue appear?

  2. Which version of Riot does it affect?

v. 3.3.1

  1. How would you tag this issue?
  • Bug
@fabien
Copy link
Contributor Author

@fabien fabien commented Feb 28, 2017

On a sidenote, I've been playing with MutationObserver and I've noticed that without no-reorder a lot of items are thrown away and recreated (typically all those after the item that was removed), and with no-reorder there's a sort of re-use of tags which is never picked up by the observer if an item is removed and another is added simultaneously. It does not pick up any changes, and observing attributes is not an option either, due to the bug outlined above.

@fabien
Copy link
Contributor Author

@fabien fabien commented Mar 1, 2017

Another update that seems to be related: when splicing (e.g. insertion at a specific index) in another object into the array being looped, with no-reorder enabled, impartial objects (for example without a color property) will retain the values of the item that was in the spot before.

Again, I noticed this in my current app, when I inserted an object without an id, it kept re-using the id that was there before. Repeatedly inserting without ids, would yield many seemingly identical objects.

I would expect the object to be reset, but perhaps this is not easily distinguishable for Riot internally. I'm using https://github.com/Yomguithereal/baobab so updates are expected to be yielding new instances with each change, as it keeps immutable state by default.

@fabien
Copy link
Contributor Author

@fabien fabien commented Mar 1, 2017

I've added another plnkr to show the behavior above:

http://plnkr.co/edit/sijR9FExaKfYkwvWnjeR?p=preview

Simply adding no-reorder causes this unexpected behavior.

@fabien
Copy link
Contributor Author

@fabien fabien commented Mar 1, 2017

@GianlucaGuarini can you explain how looped rendering actually works? With regards to no-reorder and without? I've come to realize that it's doing stuff internally you'd never expect.

Using MutationObserver I can observe all kinds of oddities, and especially how tags are being re-used. For example, on removal of a single item, I'm receiving an element that has all the properties of the last inserted item, not the actual item that was removed (somewhere halfway the list).

In addition, none of its root attributes is preserved on the element I receive, for example class is now empty.

@fabien
Copy link
Contributor Author

@fabien fabien commented Mar 5, 2017

@GianlucaGuarini thanks for the prompt fix! What about the other points I raised? Do they remain valid? Something to consider for v.4 next? Or wontfix?

@GianlucaGuarini
Copy link
Member

@GianlucaGuarini GianlucaGuarini commented Mar 5, 2017

@fabien please see #2283

@fabien
Copy link
Contributor Author

@fabien fabien commented Mar 5, 2017

@GianlucaGuarini are you specifically referring to this part, perhaps?

  1. Performant loops. A call such as items.push(elem) will update the array as well as the corresponding DOM collection in place. All array operations: unshift, splice, sort... are executed as fast as it can get.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.