comparisoniterationrenderingpromisevoltrb

Volt iteration comparison with promise


If I'm iterating through an ArrayModel using .each_with_index, is there a way to make rendering decisions based on the current index compared with the results of a Promise (at the moment, this comparison returns an error about comparing a Numeric with a Promise)?

In practice, I have a list that renders ten items by default, and a user can ask to render 20, 30, etc. If I have the user selection change the query, then the entire list re-renders, which is slow. If I have their selection change {{ if index < selected_limit }} from false to true, then only the newly-showing items re-render. But this only works if comparison of index against a Promise (selected_limit) can be done. Is there a way to do that?


Solution

  • Yes, if bindings can take promises, so what you can do is return a new promise that resolves to true or false and the if binding will update once that promises resolves.

    {{ store.todo.each_with_index do |todo, index| }}
      {{ if todo.selected_limit.then {|limit| index < limit } }}
        ....
      {{ end }}
    {{ end }}
    

    Let me know if that makes since. Calling .then on the promise will pass in the value as an argument once it resolves, but the result of .then {...} will be a new promise.