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

Question

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

原码：

 <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>

值被正确地传递给值转换器，返回值确实是一个新映射。但是，重复绑定被破坏，UI 中没有显示任何内容。

我也尝试了不同的方法：

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

   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 作为值转换器中的第一个参数。

1. 接受一个 Map 作为值转换器的第一个参数，但返回一个 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>
   

结果和我的第一个例子一样：数组返回正确，但什么都没有显示。

如何创建一个值转换器来对重复绑定的 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

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