Using {{each}} block to iterate through an array backwards in DerbyJS

Question

In a DerbyJS component, I have an array items, which I want to display in the view. I want to display the latest items of the array first, so I am looking for something like each-reverse:

{{each-reverse items as #item}}
  <p>{{#item}}</p>
{{/each-reverse}}

. Of course, this snippet of code does not work but I hope it explains what I want to achieve. Is there a way to do this in DerbyJS?

Theoretically I could reverse the items array, but I do not want to do this, because sometimes I update this array by using .push. Using .unshift instead seems to be suboptimal.

Answer 1

I'm pretty sure there is no each-reverse method that you can use in the view. One way to achieve what you want is to first reverse sort the list in the controller.

If you use a Derby sort filter to reverse the items in the array, you could still use push to update the original array like you desire.

@originalList = @model.at 'originalList'
@reversedList = @model.ref 'reversedList',  @model.sort 'originalList', (a, b) -> 
    return a - b

// add new items to the list
@originalList.push 4

// in the view
{{each reversedList as #item}}
    <p>{{#item}}</p>
{{/each}}

Alternatively, you could try

// in the view
{{each originalList as #item, #index}}
 {{originalList[originalList.length - #index]}}
{{/each}}