How can I repeat iteration of aurelia array repeater?

Question

I am trying to iterate from the end of an array to the beginning.

For instance:

repeater-template.js:

export class RepeaterTemplate {
constructor() {
this.friends = [
  'Alice',
  'Bob',
  'Carol',
  'Dana'
  ];
 }
}

Relay-template.html:

 <template>
   <p repeat.for.reverse ="friend of friends">Hello, ${friend}!</p>
 </template>

output:

Hello Dana
Hello Carol
Hello Bob
Hello Alice

Answer 1

I do not think that the decision made will work if the array mutates. I find it ideal to create a value converter that returns a return array without changing the original. For instance:

Js

export class App {
  message = 'Hello World!';

  friends = ['a', 'b', 'c'];

  attached() {
    //MUTATE!
    setTimeout(() => { this.friends.push('d') }, 300);
  }
}

export class ReverseValueConverter {
  toView(array) {
    return array.slice().reverse();
  }
}

HTML

<p repeat.for="friend of friends | reverse">Hello, ${friend}!</p>

Execution example: https://gist.run/?id=20d00a205e651b6b4d7064e2f57d2675

---

, @computedFrom https://github.com/aurelia/binding/issues/249.

- BindingEngine , , .

, !

Answer 2

<p repeat.for ="friend of Array.prototype.reverse.call(friends)">Hello, ${friend}!</p>

Answer 3

As far as I know, Aurelia does not have any explicit functions for this, but you can make a simple function in the viewmodel:

reverse(arr) {
    return arr.slice().reverse();
}

Then in the view:

<template>
   <p repeat.for="friend of reverse(friends)">Hello, ${friend}!</p>
</template>