Aurelia模板：可迭代/可重复对象类型、原理及第三方集合适配

Hey there! Let's dive into your questions about Aurelia's repeat.for directive—super useful stuff when building templates.

Aurelia's repeat.for plays nicely with any JavaScript/TypeScript object that implements the ES6 Iterable protocol. Here's a breakdown of the most common ones you'll use:

• Arrays: The classic go-to—straightforward iteration over elements.
• Plain objects: You can iterate over object keys (or key-value pairs) using syntax like repeat.for="[key, value] of myObject".
• ES6 Map: As the docs mention, this is recommended for key-value collections because it preserves insertion order and has built-in iteration support. You can iterate over entries, keys, or values.
• ES6 Set: Perfect for unique value collections—iterates over each unique element.
• Strings: Even strings work! repeat.for="char of 'hello'" will loop through each character.
• Generators: Any generator function that yields values works too, since generators return iterators.

The magic lies in the ES6 Iterable Protocol. For an object to be iterable, it must have a method under the Symbol.iterator key. This method returns an iterator object that has a next() method. Each call to next() returns an object with value (the current element) and done (a boolean indicating if iteration is finished).

Aurelia's repeat.for leverages this native protocol under the hood, so any object that adheres to it will work seamlessly. That's why the official docs recommend Map—it's designed from the ground up to follow this protocol, making it efficient and predictable for iteration.

The typescript-collections library has its own set of collection types (like ArrayList, Dictionary, LinkedList, Set) that don't natively implement the ES6 Iterable protocol out of the box. But don't worry—there are a few easy ways to make them work with repeat.for:

Option 1: Convert to an array using built-in methods #

Most collections in the package have a toArray() method that converts them to a standard JavaScript array, which repeat.for handles perfectly:

<!-- For an ArrayList -->
<div repeat.for="item of myArrayList.toArray()">${item}</div>

<!-- For a Dictionary (returns an array of values) -->
<div repeat.for="value of myDictionary.toArray()">${value}</div>

<!-- To get key-value pairs from a Dictionary -->
<div repeat.for="[key, value] of myDictionary.toArray().map((val, idx) => [myDictionary.keys()[idx], val])">
  Key: ${key}, Value: ${value}
</div>

Option 2: Add the Symbol.iterator method to the collection #

If you want to avoid converting to an array every time, you can extend the collection types to implement the Iterable protocol. For example, for an ArrayList:

import { ArrayList } from 'typescript-collections';

// Extend ArrayList to add iterator support
declare module 'typescript-collections' {
  interface ArrayList<T> {
    [Symbol.iterator](): Iterator<T>;
  }
}

ArrayList.prototype[Symbol.iterator] = function* <T>() {
  for (let i = 0; i < this.size(); i++) {
    yield this.elementAtIndex(i);
  }
};

Now you can use it directly in repeat.for without converting:

<div repeat.for="item of myArrayList">${item}</div>

Option 3: Create an Aurelia Value Converter #

A reusable value converter can handle conversion for you, keeping your templates clean:

import { ValueConverter } from 'aurelia-framework';
import { Collection } from 'typescript-collections';

export class CollectionToArrayValueConverter {
  toView(collection: Collection<any>) {
    return collection.toArray();
  }
}

Then use it in your template:

<div repeat.for="item of myCollection | collectionToArray">${item}</div>

内容的提问来源于stack exchange，提问作者Jorge Garcia