Real app scenario I cannot get working with Ractive, but can with Vue (

[Inversion-des]

Hello Ractive community!

Last few issues I reported recently are all from my attempts to get working one scenario where dynamically sorted list should be interactive (inline voting, adding new items with transition).
And still I cannot manage to make it fully working (

The problem is that if I use each with some filter ( {{#sorted(.pros)}} ) — wrong item is animated and also Vote button doesn't work for path like "@sorted(task.solutions.0.pros).2". So I'm playing with the workaround using observer and merge changes into separate .pros_sorted array to support both dynamic sorting and shuffling with correct transitions. But this is cumbersome and there is a bug with canceled previous transition (#3095) even in edge…

I do not know Ractive very well, so please help me: provide some working code for any version of Ractive to make this scenario working.

Yesterday I continued my research with attempt to make same sample working on Vue, to compare results. And I was surprised that from the first attempt I have got working solution.

Here are my results for both with some comments:

Ractive 0.8-dev (works same on edge)
https://jsfiddle.net/Inversion/crvqof7t/

• + I like how template looks
• – filter cannot be used because wrong node animated on push and Voting is hard | sorted(sol.pros) works in Vue
• – observer with additional .pros_sorted is cumbersome solution
• – bug with transitions
• – verbose methods

Vue 2.4.4
https://jsfiddle.net/Inversion/eymc6jz4/

• + works as expected without bugs
• + all the methods are simpler because of direct access to data, not to relative keypath (compare: vote, sel_sol, sol_cls, add_pro, oncomplete/onmounted). In Ractive I tried to use magic mode for similar effect, but it comes with more bugs (
• – I don't like their additional <transition>/<transition-group> tags | slide-in is better
• – I don't like v-for inside tags | #each / {{#.pros}} is better

I really like Ractive but in comparison it works not so well for me right now…

[fskreuz]

Hello! Can you describe the requirement (what needs to happen and steps to reproduce?). I'd like to avoid this becoming an XY problem where we lock ourselves to the current attempt, when there could be a better solution or alternate approach. 😁

And if the other issues are related, can you merge them into this issue. That way, we don't have multiple issues of the same bug.

[evs-chris]

This is one of the last remaining areas that ractive has trouble with. On my list of things to resolve before 1.0 is keyed updates on lists at the vdom level in addition to the model level. That will allow having transitions behave correctly when computed lists change.

In addition to that, I'd also like to get shuffling to the point that it doesn't detach all of the nodes involved, but instead moves as few as possible directly. That would solve some of the transition issues with shuffling lists in relatively rapid succession.

[Inversion-des]

Can you describe the requirement

Yes, I described what is the goal:
"dynamically sorted list should be interactive (inline voting, adding new items with transition)". That's it. You can see it in action in provided samples of my solutions.
And I do not ask to analyze my solutions, instead I'm asking about advices or samples or any working solution.

if the other issues are related, can you merge them into this issue

I don't know how to merge issues, but here I actually want just to raise a discussion about some best practices or ready solutions how to achieve described goal.

Thank you for your time.

[dagnelies]

Hi,

I just came by. Here you go:

https://jsfiddle.net/twa2n8zz/2/

I cleaned it up "my style" and made it javascript because I'm more used to.

...the only drawback is with the transition. Somehow the wrong item is slided in.

[paulocoghi]

@dagnelies, it seems that one of the issues presented by Inversion-des is the same as yours: "wrong item is animated".

[ceremcem]

@paulocoghi Exactly which item is wrongly animated? I'm unable to find it.

[dagnelies]

@ceremcem Instead of sliding in an item in the middle where it belongs, it's always the last item at the bottom which is slided in.

[dagnelies]

@Inversion-des can this be closed?

[Inversion-des]

I would like to wait for some fixes so we can have a working solution here as a result.

[dagnelies]

there are a couple of issues with this. First, the initial thread/question/context is a very broad question. It is accordingly tagged as inquiry/question.

I would also say it is roughly answered thanks to the example here: https://jsfiddle.net/twa2n8zz/2/

Nevertheless, there is a bug reagarding the animation. However, I recommend that you create a new issue, regarding specifically the animation bug and with a minimalistic example to reproduce it. This thread full of talk and with a complex example as showcase is not suited as a bug report.

[Inversion-des]

Ok, so better to close this.

[evs-chris]

As of now on edge, there is experimental support for automatic shuffling for individual each blocks using {{#each sorted(.props), true shuffle}}.