在 Aurelia 的 ES 6 地图上使用值转换器

Question

我正在尝试在 Aurelia 中的重复绑定上使用值转换器对 Map 进行排序：

原代码：

 <div repeat.for="[id, obj] of myMap">
     ${obj.SomeProperty}
 </div>

这按预期工作，显示了地图的值，当我向地图添加内容时，它也会添加。

然后我创建了以下值转换器：

export class SortValueConverter {
    toView(map, propertyName, direction) {
        const factor = direction === 'desc' ? -1 : 1;
        return new Map([...map.entries()].sort((a, b) => (a[propertyName] - b[propertyName]) * factor));
    }
}

<div repeat.for="[id, obj] of myMap | sort:'SomeProperty':'desc'">
     ${obj.SomeProperty}
 </div>

值已正确传递到值转换器，return 值确实是一个新地图。然而，重复绑定被破坏，UI 中没有显示任何内容。

我也尝试了不同的方法：

在将映射传递到值转换器之前将其转换为数组，然后使用常规数组值转换器：

export class SortValueConverter {
    toView(array, propertyName, direction) {
        const factor = direction === 'desc' ? -1 : 1;
        return array.sort((a, b) => (a[propertyName] - b[propertyName]) * factor));
    }
}

<div repeat.for="obj of Array.from(myMap.values()) | sort:'SomeProperty':'desc'">
     ${obj.SomeProperty}
</div>

// or alternatively:

<div repeat.for="obj of [...myMap.values()] | sort:'SomeProperty':'desc'">
     ${obj.SomeProperty}
</div>

这给了我一个 undefined 作为值转换器中的第一个参数。

接受一个 Map 作为值转换器的第一个参数，但是 return 一个 Array:

export class SortValueConverter {
    toView(map, propertyName, direction) {
        const factor = direction === 'desc' ? -1 : 1;
        return [...map.values()].sort((a, b) => (a[propertyName] - b[propertyName]) * factor));
    }
}

<div repeat.for="obj of myMap | sort:'SomeProperty':'desc'">
     ${obj.SomeProperty}
</div>

结果与我的第一个示例相同：数组 returned 正确，但没有显示任何内容。

如何创建值转换器以在重复绑定上对 Map 进行排序？

Answer 1

您的问题是您处理 Map 对象的方式。

当你使用'map.entries()'创建一个数组时，你得到元组，其中位置0是键，位置1是对象。您正在使用元组作为对象。

你做到了：

[...map.entries()].sort((a, b) => (a[propertyName] - b[propertyName]) * factor)

应该做的：

[...map.entries()].sort((a, b) => (a[1][propertyName] - b[1][propertyName]) * factor)

还有其他方法可以做到这一点，但这是最接近您的代码的方法（也是最容易应用的修复方法）。

查看实际效果： https://gist.run/?id=caa652ef4fbc54e16df2e853784ffa4b

尽管这仍然不能真正解释为什么您没有显示任何内容（显示了我的，但没有正确排序）。也许您会使用提供的示例找到问题（这是一切正常所需的最低要求，所以请快速比较一下，祝您好运！）。

在 Aurelia 的 ES 6 地图上使用值转换器

Using a value convertor on an ES 6 Map in Aurelia

ecmascript-6

aurelia

es6-map