Question

我正在尝试使用Algolia's searchHelper.js实现分层类别菜单，但类别内容未显示。

示例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上找到有关操作层次结构面的更多信息。

我在jsFiddle上也是fixed your sample。以下是我更改的部分：

接收数据时处理层次结构（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：l.44-46）

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

algoliasearchHelper层次结构

1 个答案: