Instantsearch.js / Hits小部件：在细化上转换数据

Question

我正在将Instantsearch.js与refinementList和hits小部件一起使用。

我有refinementList的分面搜索/ colors。

• 每个项目都有一个images。
数组
• 每个image都有url，数组colors
• 当您按红色进行过滤时，例如，我想在image数组中显示红色的colors。

因此，在item的任何过滤器上调整发送到refinementList模板的数据似乎合乎逻辑。

起初我似乎可以使用widget.hits的{​​{1}}回调：https://community.algolia.com/instantsearch.js/documentation/#hits，但是，在过滤{{1}时似乎不一定会调用transformData }。如果显示结果，并且仍然在refinementList过滤器后显示，则似乎不会调用transformData。

关于实现这一目标的方法或任何替代方法的任何建议？

以下是我目前的位置：https://jsfiddle.net/timkelty/LyuL5eze/7/

它应该如何运作：

• 测试产品配置 - 默认图片（无过滤器）： Admiral Ackbar 128Px
• click brown
• 点击粉红色
• 测试产品配置的图像现在是 Poochie
• 取消选中粉色，选中蓝色
• 测试产品配置的图像现在是 Bowie

很好 - 除了 之外，如果transformData是从之前的状态重新渲染的话。

例如，未检查过滤器（不起作用，这就是问题）：

• 测试产品配置 - 默认图片（无过滤器）： Admiral Ackbar 128Px
• 检查粉红色
• 图片应该是 Poochie ，但仍然 Admiral Ackbar 128Px ，大​​概是因为refinementList尚未在该项目上调用，因为它已经存在且不需要重新渲染。