Algolia Seach無限のスクロールを追加

私はアルゴリアの検索に取り組み、this tutorialに続いて無限のスクロールを追加しています。私は単に与えられたコードをコピーしましたが、私は何かを逃したようです。無限のスクロールのリクエストが送信されたときにエラーが発生します。以下のコードをご覧ください。Algolia Seach無限のスクロールを追加

<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&rsquo;t find any results for the search <em>&ldquo;{{query}}&rdquo;</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方法と言って引数内のエラーを取得する私のスクリプトです。私はここに繰り返しコードがあるのがわかりますが、何を削除し、何を追加するのか分かりません。してくださいありがとう

出典

2016-07-19 Talha Malik