Question

我正在尝试从数组的末尾迭代到它的开头。

例如：

中继-template.js：

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

中继-template.html：

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

输出：

Hello Dana
Hello Carol
Hello Bob
Hello Alice

Answer 1

如果阵列发生变异，我认为接受的解决方案无效。我相信理想的是创建一个返回反转数组的值转换器，而不会改变原始数组。例如：

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>

正在运行示例：https://gist.run/?id=20d00a205e651b6b4d7064e2f57d2675

我们无法在此使用计算属性，因为@computedFrom尚不支持集合https://github.com/aurelia/binding/issues/249。

另一种可能的解决方案是通过BindingEngine订阅数组并在其变异时更新反向副本，但这将是解决一个简单问题的太多代码。

希望这有帮助！

Answer 2

据我所知，Aurelia没有任何明确的功能，但你可以在viewmodel中创建一个简单的函数：

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

然后在视图中：

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

Answer 3

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

如何在aurelia阵列中继器上反向迭代？

3 个答案: