我正在研究Algolia，并在this tutorial之后添加无限滚动。我只是复制了给定他们的代码，但似乎我错过了一些东西。发送无限滚动请求时出现错误。请参见以下代码。
<html>
<head>
<title>Infinite Scroll Instant Search Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<a href="/"><img src="img/[email protected]"/></a>
<input id="search-input" type="text" placeholder="Search for products"/>
<div id="search-input-icon"></div>
</header>
<main>
<div id="right-column">
<div id="hits"></div>
</div>
</main>
<script src="js/instantsearch.min.js"></script>
<script src="js/mustache.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"></script>
<script src="js/infinite_scroll.js"></script>
<script type="text/html" id="hits-template">
<div class="hits">
{{#pageNo}}
<div class="page-no">
Page {{pageNo}}
</div>
{{/pageNo}}
{{#hits}}
<div class="hit">
<a href="{{url}}">
<img src="{{image}}" alt="{{name}}">
<p class="name">
{{#_snippetResult}}
{{{_snippetResult.name.value}}}
{{/_snippetResult}}
{{^_snippetResult}}
{{name}}
{{/_snippetResult}}
</p>
</a>
</div>
{{/hits}}
</div>
</script>
<script type="text/html" id="no-results-template">
<div id="no-results-message">
<p>We didn’t find any results for the search <em>“{{query}}”</em></p>
<a href="#" class="clear-all">Clear all</a>
</div>
</script>
以下是我的脚本
<script type="text/javascript">
var search = instantsearch({
appId: 'AJUBPPRF41',
apiKey: '3cecdb91586ac2ac0d59f1355481f472',
indexName: 'getstarted_actors',
searchParameters: {
attributesToSnippet: 'name:9'
},
urlSync: {
useHash: true
}
});
var searchBoxWidget = instantsearch.widgets.searchBox({
container: '#search-input'
});
var infiniteScrollWidget = infiniteScrollWidget({
container: '#hits',
templates: {
items: document.querySelector('#hits-template').innerHTML,
empty: document.querySelector('#no-results-template').innerHTML
}
});
search.addWidget(searchBoxWidget);
search.addWidget(infiniteScrollWidget);
search.start();
var cursor, index, page, nbPages, loading;
var infiniteScrollWidget = function(options){
var container = document.querySelector(options.container);
var templates = options.templates;
if(!container) {
throw new Error('infiniteScroll: cannot select \'' + options.container + '\'');
}
return {
init: function(){},
render: function(args) {
var scope = {
templates: templates,
container: container,
args: args,
offset: offset
};
if(args.results.nbHits) {
window.addEventListener('scroll', searchNewRecords.bind(scope));
}
initialRender(container, args, templates);
}
};
};
</script>
<script type="text/javascript">
var cursor, index, page, nbPages, loading;
var hitsDiv = document.getElementById('hits');
var scrolledNearBottom = function(el){
return (el.scrollHeight - el.scrollTop) < 850;
};
var searchNewRecords = function(){
if(scrolledNearBottom(document.querySelector('body'))) {
addSearchedRecords.call(this);
}
};
var addSearchedRecords = function(){
if(!loading && page < nbPages - 1) {
loading = true;
page += 1;
helper.searchOnce({page: page}, appendSearchResults.bind(this));
}
};
var appendSearchResults = function(err, res, state){
page = res.page;
args.results.pageNo = page + 1; // Here I get error saying args is not defined
loading = false;
var result = renderTemplate(this.templates.items, res);
this.container.appendChild(result);
if(page === nbPages - 1 && (this.args.results.nbHits > nbPages * this.args.results.hitsPerPage)){
index = helper.client.initIndex(this.args.state.index);
window.removeEventListener('scroll', searchNewRecords.bind(this));
window.addEventListener('scroll', browseNewRecords.bind(this));
addBrowsedRecords.call(this);
}
};
</script>
我在appendSearchResults方法内部收到错误消息，提示未定义args。我可以看到我在这里有重复的代码，但是我不确定要删除和添加什么。请指导。
这里您获得了完整的包装。https://github.com/algolia/demo-infinite-scroll/
我建议首先使其与现有字段，设置等一起使用。演示在您最后运行后，您可以修改Indexer字段并根据需要检索它。