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>

迭代对象属性

2 个答案: