自定義Algolia instantSearch.js addWidget函數

Question

我想根據Algolia返回的結果編輯Hits容器，假設如下： hits-container

<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在此容器中返回的所有結果，現在我想在顯示結果之前應用一些邏輯。 有什么建議么 ？

Answer 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展示它。