ecmascript-6 - 在 Aurelia 的 ES 6 map 上使用值转换器

Question

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

原代码:

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

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

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

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>

值被正确地传递给值转换器，返回值确实是一个新 map 。重复绑定(bind)已中断，但 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 作为值转换器的第一个参数，但返回一个数组:

   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>
   

结果和我的第一个例子一样:正确返回了数组，但是没有显示任何内容。

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

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