[Live] Add a `data-live-keep` attribute to "keep" an element between re-renders

[weaverryan]

Hi!

2 use-cases in mind:

A) "Load More". You render 10 items. When you click "Load more", that probably sets a model called page to 2. So you load results 11-20. But you want results 1-10 to remain.

B) Flash notifications. You render a flash notification after a LiveAction and you have some nice behavior that shows that as a toast notification that auto-closes. But, if your component re-renders before the toast closes, the re-render will remove it and cause it to close too early.

The idea would be to have something like <div data-live-keep>. That's actually quite easy to accomplish. What's trickier is thinking of a nice way to allow the user to remove this element later if they need to. For example, you data-live-keep results 1-10 in my pagination example. But then the user searches for something new - and you now need to reload the results completely.

Possible solutions to "removing the element when needed":

• 1. Tell the user to add a data-live-id to a parent element whose value changes when you need the elements inside to disappear. When the data-live-id is different, this would tell us to completely replace the parent div, and not try to keep anything inside.

... actually that's all I can think of right now :p.

[smnandre]

I'd suggest to pass a value. And while it's the same value, it's persisted.

That's how i "hacky-coded" my lazyload the other day (that and some shady DOM manipulation 👼 )

So to lazy load all comments under an article... you could use the article id

data-live-keep="{{ article.id }}"  

[richardhj]

Following.

I have a paginated list (10 items per page). Each list item has an embedded component. The embedded components are initialized for the 10 rows shown. When a the liveprop changes, and the list re-renders with different items, child components for other items than the initial 10 rows are not being initialized.

Looks like this issue for me :D