3

我正在尝试使用 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>

这些值被正确地传递给值转换器，并且返回值确实是一个新映射。但是，重复绑定被破坏，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>

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

如何创建一个值转换器来对重复绑定的 Map 进行排序？

4

1 回答 1

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

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

于 2017-02-01T14:18:14.783 回答