在查询后向搜索命中添加属性并在 InstantSearch.js 中动态重新呈现

Question

我正在为具有普通 JavaScript 实现的网上商店的产品设置 InstantSearch icw Algolia。 我能够遵循所有文档，但我遇到了一个问题，即我们有特定于客户群体的价格，以及诸如实时库存信息之类的东西（需要再次拨打 API 电话）。

我希望在获得搜索结果后从我们自己的后端理想地加载这些属性。

我认为这只是在收到搜索结果后对其进行操作并仅重新呈现前端的问题（无需再次调用 Algolia 搜索 API 获取新结果）。

这有点棘手。 transformItems 功能是可能的，但我希望已经显示结果并将其他数据加载到命中模板中，而不是在显示命中结果之前。

所以我最终得到了一个自定义小部件，我可以在那里访问和操作结果，但这里的问题是我不知道如何将这些更改反映到呈现的模板中。

我的小部件的代码（尝试将每个股票编号设置为9）如下：

{
    render: function(data) {
        const hits = data.results.hits;

        hits.forEach(hit => {
            hit.stock = 9
        });
    }
}

数据已更改，但从模板生成的 html 并未反映命中对象的任何更改。

那么，如何在更改命中数据后触发重新呈现，而不触发新的搜索查询？

我在文档中的任何地方都找不到 function 来执行此操作。

谢谢！

Answer 1

hits 小部件中有 transformItems function，可让您根据需要转换、删除或重新排序项目。 它在项目显示之前被调用。

如果我使用你的例子，它会是这样的：

transformItems(items) {
  return items.map(item => ({
    ...item,
    stock: 9,
  }));
}

当然，您可以在其中某处添加 API 电话。

vanilla JS 库的文档：