algoliasearchHelper分層面

Question

我試圖實現與Algolia's searchHelper.js分層分類菜單，但類別內容未顯示。

https://jsfiddle.net/t0tue5rk/1/

樣品Algolia記錄：

objectID: 41 
title: "Canon 40D With Lens" 
hierarchicalCategories: { 
"lvl0" : "Video Juegos y Consolas", 
"lvl1" : "Video Juegos y Consolas > PS3", 
"lvl2" : "Video Juegos y Consolas > PS3 > Juegos" 
} 

Answer 1

層次方面是從連接性和分離性方面，它們是基於樹的不同。你的例子中的問題是你爲這個不同的結構重複使用同一種模板。您可以在主要的documentation of the Algolia JS Helper上找到更多關於層級構面操作的信息。

我也是fixed your sample上jsFiddle。下面是我改變了部分：

• 處理分層面接收數據（L.128）時：

  else if(facetName === 'categories') { 
      facetContent = { 
      facet: facetName, 
      title: FACETS_LABELS[facetName], 
      values: content.getFacetValues(facetName, {sortBy: ['isRefined:desc', 'count:desc']}) 
      }; 
      facetsHtml += hierarchicalFacetTemplate.render(
      facetContent, 
      {sub: hierarchicalFacetTemplateSource}); 
  } 
  

  爲了簡單起見，我硬編碼的屬性的名稱。

• 創建兩個模板，一個用於容器，另一個用於遞歸地遍歷值樹。 （html：l.117-138）

  <script type="text/template" id="hierarchical-facet-header-template"> 
      <div class="facet facet-hierarchical"> 
      <h5>{{ title }}</h5> 
      {{#values}} 
       {{>sub}} 
      {{/values}} 
      </div> 
  </script> 
  
  <!-- Hierarchical Facet template --> 
  <script type="text/template" id="hierarchical-facet-template"> 
      <ul> 
       {{#data}} 
       <li> 
       <a href="" class="facet-link toggle-refine facet-hierarchical {{#isRefined}}facet-refined{{/isRefined}}" data-facet="{{ facet }}" data-value="{{ path }}"> 
        {{ name }}<span class="facet-count">{{ count }}</span> 
       </a> 
       {{>sub}} 
       </li> 
      {{/data}} 
      </ul> 
  </script> 
  

• 將這些新模板導入到JS中。 （js：1.44-46）

  var hierarchicalFacetHeaderTemplateSource = $('#hierarchical-facet-header-template').text(); 
  var hierarchicalFacetTemplateSource = $('#hierarchical-facet-template').text(); 
  var hierarchicalFacetTemplate = Hogan.compile(hierarchicalFacetHeaderTemplateSource);