Instantsearch 여러 히트 위젯을위한 히트 컨테이너 1 개

Question

나는 현재 Algolia instantsearch v1로 어려움을 겪고 있습니다. 내가 성취하고자하는 것은 각 히트 위젯에 대해 히트 컨테이너가 여러 개 있지 않는 것입니다.

var template_fachbereiche = 
    '<a href="{{url}}">'+ 
     '<div class="title"><strong>{{fachbereich}}</strong></div>'+ 
     '<div class="text">{{{_highlightResult.titel.value}}}</div>'+ 
    '</a>'; 

var template_zentren = 
    '<a href="{{url}}">'+ 
     '<div class="title"><strong>{{fachbereich}}</strong></div>'+ 
     '<div class="text">{{{_highlightResult.titel.value}}}</div>'; 
    '</a>'; 

var template_experten = 
    '<img src="{{profilbild}}">'+ 
    '<div class="text"><p><strong>{{{_highlightResult.name.value}}}</strong>{{position}}</p></div>'; 

var template_sprechstunden = 
    '<strong>{{titel}}</strong>'+ 
    '<p>{{text}}</p>'; 

var fachbereiche = instantsearch({ 
    appId: appId, 
    apiKey: apiKey, 
    indexName: 'fachbereiche', 
    searchFunction: function(helper) { 
     var query = fachbereiche.helper.state.query; 
     zentren.helper.setQuery(query); 
     zentren.helper.search(); 
     sprechstunden.helper.setQuery(query); 
     sprechstunden.helper.search(); 
     experten.helper.setQuery(query); 
     experten.helper.search(); 
     helper.search(); 
    } 
}); 

var zentren = instantsearch({ 
    appId: appId, 
    apiKey: apiKey, 
    indexName: 'zentren' 
}); 

var experten = instantsearch({ 
    appId: appId, 
    apiKey: apiKey, 
    indexName: 'experten' 
}); 

var sprechstunden = instantsearch({ 
    appId: appId, 
    apiKey: apiKey, 
    indexName: 'sprechstunden' 
}); 

var hits_fachbereiche = instantsearch.widgets.hits({ 
    container: '#hits_fachbereiche', 
    hitsPerPage: 100, 
    templates: { 
     empty: '', 
     item: template_fachbereiche 
    }, 
    cssClasses: { 
     root: 'group', 
     item: 'gridItem fachbereich' 
    } 
}); 

var hits_zentren = instantsearch.widgets.hits({ 
    container: '#hits_zentren', 
    hitsPerPage: 100, 
    templates: { 
     empty: '', 
     item: template_zentren 
    }, 
    cssClasses: { 
     root: 'group', 
     item: 'gridItem zentrum' 
    } 
}); 

var hits_experten = instantsearch.widgets.hits({ 
    container: '#hits_experten', 
    hitsPerPage: 100, 
    templates: { 
     empty: '', 
     item: template_experten 
    }, 
    cssClasses: { 
     root: 'group', 
     item: 'gridItem experte' 
    } 
}); 

var hits_sprechstunden = instantsearch.widgets.hits({ 
    container: '#hits_sprechstunden', 
    hitsPerPage: 100, 
    templates: { 
     empty: '', 
     item: template_sprechstunden 
    }, 
    cssClasses: { 
     root: 'group', 
     item: 'gridItem sprechstunde' 
    } 
}); 

fachbereiche.addWidget(
    instantsearch.widgets.refinementList({ 
     container: '#filter_fachbereiche', 
     attributeName: 'facet', 
     limit: 100, 
     operator: 'and' 
    }) 
); 

zentren.addWidget(
    instantsearch.widgets.refinementList({ 
     container: '#filter_zentren', 
     attributeName: 'facet', 
     limit: 100, 
     operator: 'and' 
    }) 
); 

experten.addWidget(
    instantsearch.widgets.refinementList({ 
     container: '#filter_experten', 
     attributeName: 'facet', 
     limit: 100, 
     operator: 'and' 
    }) 
); 

sprechstunden.addWidget(
    instantsearch.widgets.refinementList({ 
     container: '#filter_sprechstunden', 
     attributeName: 'facet', 
     limit: 100, 
     operator: 'and' 
    }) 
); 

var searchbox = instantsearch.widgets.searchBox({ 
    container: document.querySelector('#searchbox'), 
    autofocus: false 
}); 

fachbereiche.addWidget(hits_fachbereiche); 
fachbereiche.addWidget(searchbox); 
zentren.addWidget(hits_zentren); 
experten.addWidget(hits_experten); 
sprechstunden.addWidget(hits_sprechstunden); 

zentren.start(); 
experten.start(); 
sprechstunden.start(); 
fachbereiche.start(); 

fachbereiche.on('render', function() { 
    initMasonry(); 
}); 

모두 할당 된 다른 컨테이너이 있어야합니다 (예 : #hits_experten 및 #hits_sprechstunden) :

여기에 전체 코드입니다. 그렇지 않으면 첫번째 히트 위젯 만 출력됩니다.

위젯에 대해 하나의 컨테이너 (#hits)를 하나만 가질 수 있습니까?

Answer 1

InstantSearch.js v2는이 문제를 위젯의 덜 상응하는 렌더링 인 커넥터로 해결합니다. 커넥터에 함수를 제공하면 위젯 팩토리가 생깁니다. more information on the doc이 있습니다.

이 문제에 대해 다른 방법을 사용할 수도 있습니다. 히트는 비즈니스 로직의 측면에서 매우 간단한되는 위젯 당신은 당신의 자신을 구현할 수 : custom widgets에 대한

var search = instantsearch(/* options */); 
search.addWidget({ 
    render: function(opts){ 
    var results = opts.results; 
    var hits = results.hits; 
    hits.forEach(function(h) { 
     // render the hit wherever you want 
    }); 
    } 
}); 
search.start(); 

v2와의 문서 V1 관련이 있습니다.