自定义 Algolia instantSearch.js addWidget 函数
customize Algolia instantSearch.js addWidget function
我想编辑 Hits 的容器,根据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>
添加小部件功能:
<script type="text/javascript">
search.addWidget(
instantsearch.widgets.hits({
container: '#hits-container',
templates: {
item: $('#hits').html(),
empty: 'No Orders',
}
})
);
</script>
假设我想禁用编辑 link 如果日期小于当前日期,addWidget 将显示此容器内 Algolia 返回的所有结果,现在我想在显示之前应用一些逻辑结果。
有什么建议么 ?
InstantSearch.js 小部件模板可以定义为 Mustache 字符串或接收小部件数据并返回字符串的函数。
此函数可能包含有关禁用编辑的逻辑 link。类似于:
templates: {
item: function(data) {
let className = "";
if (data.rating < 4) {
className = "bad-rating";
}
return (
"<div" +
' class="' +
className +
'">' +
data._highlightResult.title.value +
"</div>"
);
}
}
这是一个完整的 jsfiddle 展示。
我想编辑 Hits 的容器,根据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>
添加小部件功能:
<script type="text/javascript">
search.addWidget(
instantsearch.widgets.hits({
container: '#hits-container',
templates: {
item: $('#hits').html(),
empty: 'No Orders',
}
})
);
</script>
假设我想禁用编辑 link 如果日期小于当前日期,addWidget 将显示此容器内 Algolia 返回的所有结果,现在我想在显示之前应用一些逻辑结果。 有什么建议么 ?
InstantSearch.js 小部件模板可以定义为 Mustache 字符串或接收小部件数据并返回字符串的函数。
此函数可能包含有关禁用编辑的逻辑 link。类似于:
templates: {
item: function(data) {
let className = "";
if (data.rating < 4) {
className = "bad-rating";
}
return (
"<div" +
' class="' +
className +
'">' +
data._highlightResult.title.value +
"</div>"
);
}
}
这是一个完整的 jsfiddle 展示。