javascript - 如何反向迭代 aurelia 阵列中继器？

Question

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

例如:

repeater-template.js:

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

repeater-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 订阅数组，并在它发生变化时更新反向副本，但这将是解决一个简单问题的代码太多。

希望这对您有所帮助!