遍历对象属性

Question

在我的aurelia应用程序中，我需要显示一个元素列表。 出于性能原因，这些元素存储为javascript对象而不是数组。 那就是对象的样子：

var x = {
    0 : {...},
    3 : {...},
    5 : {...},
}

这是模板中显示这些元素的部分：

<template>
    <ul>
        <li repeat.for="property of object | ObjectToArray">
            ${ property.text }
        </li>
    </ul>
</template>

如您所见，我当前正在使用一个值转换器来迭代我的对象属性。 值转换器将对象简单地转换为数组：

export class ObjectToArrayValueConverter {
    toView(data : {[key : string] : any}) : any[] {

        var array = [];

        for (var key in data) {
            array.push(data[key]);
        }

        return array;
    }
}

只要在第一次呈现列表后不会将属性删除或添加到对象，该解决方案就可以很好地工作。 原因是值转换器仅被调用一次。 但是，就我而言，无论发生什么情况，我都需要我的清单以保持最新。

我知道我可以创建一个可以在每次修改对象时手动调用的函数，但这会增加一些不必要的业务逻辑复杂性。

是否有aurelia功能可以帮助我实现所需的功能？ 我在文档中找不到任何帮助。 谢谢 ！

Answer 1

您可以使用Object.prototype.keys来获取键，并在每次要列出它时调用Array.prototype.map以获得一个数组。

var obj={...}; //Object with many keys
var genArray = Object.keys(obj).map(function(key){return obj[key];})


//Using as a function
function getKeysAsArray(obj){
    if(!obj){
        return [];
    }
    return Object.keys(obj).map(function(key){return obj[key]});
}

Answer 2

有一个更简单的策略，如docs所示：

export class KeysValueConverter {
  toView(obj) {
    return Reflect.ownKeys(obj);
  }
}

用法：

<p repeat.for="greeting of friends | keys">${greeting}, ${friends[greeting].name}!</p>