Volt iteration comparison with promise

Question

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?

score 2 · Answer 1 · answered Jul 08 '15 at 15:08

You should be able to use .value for the comparison, that's how I did it in a project myself.

{{ store.players.each do |player| }}
  {{ unless player == current_player.value }}
    <table class='player'>
      <tr><td>{{ player.name }}</td></tr>
      <tr><td><button e-click='add_vote(player.id)'>+1</button></td></tr>
    </table>
  {{end}}
{{end}}

score 2 · Accepted Answer · answered Jul 08 '15 at 17:52

2

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.

answered Jul 08 '15 at 17:52

Ryan

956
7
8

Both phoffer's answer and yours work. Is either a more preferred standard practice? – neurodynamic Jul 28 '15 at 13:25
use .then, .value might not be there when you check it. But .then will wait for it. – Ryan Jul 28 '15 at 18:56

Volt iteration comparison with promise

2 Answers2