algolia/instantsearch：connectMenu 精炼（）删除当前精炼值

Question

有什么方法可以通过 connectMenu 的连接器删除一个精炼的值？

这些是我尝试过但不起作用的东西：

• 传递一个空字符串refine('')
• 传递一个空值refine(null)
• 传递一个错误值refine(false)
• 不传递参数refine()

我之所以要这样做是因为如果不是 currentRefinedValues 小部件，即使它不是，它也会将属性显示为精炼。

var customMenuRenderFn = function (renderParams, isFirstRendering) {
    var container          = renderParams.widgetParams.containerNode;
    var title              = renderParams.widgetParams.title || 'dropdownMenu';
    var templates          = renderParams.widgetParams.templates;
    var hideIfIsUnselected = renderParams.widgetParams.hideIfIsUnselected || false;
    var cssClasses         = renderParams.widgetParams.cssClasses || "";

    if (isFirstRendering)
    {
        $(container).append(
            (templates.header || '<h1>' + renderParams.widgetParams.attributeName + '</h1>') +
            '<select class="' + cssClasses.select + '">' +
                '<option value="__EMPTY__">Tutto</option>' +
            '</select>'
        ).hide();

        var refine = renderParams.refine;

        if (! hideIfIsUnselected)
        {
            $(container).show();
        }
        else
        {
            $(hideIfIsUnselected).find('select').on('items:loaded', function () {
                if (isFirstRendering) {
                    var valueToCheck = $(hideIfIsUnselected).find('select').val();

                    $(container).toggle(valueToCheck !== '__EMPTY__');

                    $(container).find('select').off('items:loaded');
                }
            });

            $(hideIfIsUnselected).find('select').on('change', function (event) {
                var value = event.target.value === '__EMPTY__' ? '' : event.target.value;

                if (value === '') {
                    refine();
                }

                $(container).toggle(value !== '');
            });
        }

        $(container).find('select').on('change', function (event) {
            var value = event.target.value === '__EMPTY__' ? '' : event.target.value;

            refine(value);
        });
    }

    function updateHits (hits)
    {
        var items  = renderParams.items;

        optionsHtml = ['<option class="' + cssClasses.item + '" value="__EMPTY__" selected>Tutto</option>']
            .concat(
                items.map(function (item) {
                    return `<option class="${cssClasses.item}" value="${item.value}" ${item.isRefined ? 'selected' : ''}>
                                ${item.label} (${item.count})
                            </option>`;
                })
            );

        $(container).find('select').html(optionsHtml);

        $(container).find('select').trigger('items:loaded');
    }

    if (hideIfIsUnselected && $(hideIfIsUnselected).val() !== '__EMPTY__') {
        updateHits(renderParams.items);
    } else if (! hideIfIsUnselected) {
        updateHits(renderParams.items);
    }
}

var dropdownMenu = instantsearch.connectors.connectMenu(customMenuRenderFn);

Answer 1

refine 函数实际上会切换值（如果未设置则设置它，如果设置则取消设置）。如果要取消选择菜单中的任何项目，则需要找到当前选择的值并在其上使用refine。

connectMenu(function render(params, isFirstRendering) {
  var items = params.items;
  var currentlySelectedItem = items.find(function isSelected(i) {
    return i.isRefined;
  });
  params.refine(currentlySelectedItem);
});

此示例不会完全解决您的代码，但它显示了如何找到当前选定的项目并取消选择它。