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）：

はここで完全なコードです。そうでない場合、最初のヒットウィジェットだけが出力されます。

両方のウィジェットに対して1つのコンテナ（#hits）を1つだけ持つことはどういうことですか？

Answer 1

InstantSearch.js v2は、この問題を、ウィジェットのレスポンスの少ないコネクタで解決します。コネクターに関数を提供し、ウィジェットファクトリーを取得します。 more information on the docがあります。

また、この問題を解決する別の方法もあります。ヒットは、ビジネスロジックの面で非常にシンプルであること、あなたがあなた自身を再実装できウィジェット：

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(); 

custom widgetsためのV2のドキュメントはv1の関連性があります。