自定义 Algolia instantSearch.js addWidget 功能答案

【问题标题】：customize Algolia instantSearch.js addWidget function自定义 Algolia instantSearch.js addWidget 功能
【发布时间】：2018-02-10 23:09:27
【问题描述】：

我想根据 Algolia 返回的结果编辑 Hits 的容器，假设如下： 命中容器

<div id="hits">
    <div class="col-md-2">{{ id }}</div>
    <div class="col-md-2">{{ user }}</div>
    <div class="col-md-2">{{ email }}</div>
    <div class="col-md-2">{{ date }}</div>

    <a href="/orders/{{id}}/edit" class="btn" >
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
    </a>
</div>

addWidget 功能：

<script type="text/javascript">
search.addWidget(
    instantsearch.widgets.hits({
        container: '#hits-container',
        templates: {
            item: $('#hits').html(),
            empty: 'No Orders',
        }
    })
);
</script>

假设如果日期小于当前日期，我想禁用编辑链接，addWidget 将在此容器内显示 Algolia 返回的所有结果，现在我想在显示结果之前应用一些逻辑。有什么建议？

【问题讨论】：

标签： javascript algolia instantsearch.js

【解决方案1】：

InstantSearch.js 小部件模板可以定义为 Mustache 字符串或接收小部件数据并返回字符串的函数。

此函数可能包含有关禁用编辑链接的逻辑。类似的东西：

templates: {
  item: function(data) {
    let className = "";
    if (data.rating < 4) {
      className = "bad-rating";
    }
    return (
      "<div" +
      ' class="' +
      className +
      '">' +
      data._highlightResult.title.value +
      "</div>"
    );
  }
}

这是一个完整的jsfiddle 展示它。

【讨论】：