Ractive Js : Direct Dom Insertion Sort/order For Nested Object List Associated With #each Key Section In Template

I have seen lots of examples of using array based functions in Ractive for sorting and ordering lists but I was wondering if the same facility could be easily effected for nested o

Solution 1:

Why not use a computed property based on your object. Just ractive.get the object data (thus registering a dependency) and return the values sorted however you like. In your template you will iterate through this new computed property. Whenever a new key is inserted, computed property will be updated automatically and then your template/view will be also ractively rerendered

Solution 2:

Per my initial intuition, I ended up pursuing choice 2 from my list of possible solutions. I created a component definition for my card view. I then referenced the card component in my parent template,within the parent template #each section/iterator, passing in a key identifier(so I could correlate which component instance was associated with which nested object key in future calls). I also templated things so the same key identifier was assigned to the container div id for each card component instance.

With those relationships in place, I was able to catch the instance event for default rendering(onrender) that auto magic appends new nested data objects to the end of the card view list. I effectively over rode that placement with a subsequent new placement using the ractive.insert method, within the event processing. By passing the parent div id and the desired sibling card div id(anchor) insertion point to ractive.insert, I was able to re-render the new card in the desired order.

While that addresses my original question for the add card use case, it still creates a lingering issue for a second use case: deleting a card. The associated active component instance for a nulled("deleted") nest object key is not removed from the parent container active component list. Nor is it de referenced after explicitly calling teardown for the instance (although it is removed from the view), so its instance specific data functions are still called post "delete." I suspect there is some data binding or teardown cleanup issue going on. I am going to follow up on that use case separately, because of concerns of potential memory leaks and processing overhead for phantom card instances.

See link below for codepen example:

Codepen Link

This codepen demonstrates the default ordering and the sorted version by toggling sort button