定制Algolia instantSearch.js addWidget功能

Question

我想编辑命中容器的基础上，通过Algolia返回的结果， 以下假设： 命中容器

<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将显示所有res在此容器中Algolia返回的ults，现在我想在显示结果之前应用一些逻辑。 有什么建议吗？

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