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?
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.