【问题标题】:Change Algolia instantsearch.js stats template更改 Algolia Instantsearch.js 统计信息模板
【发布时间】:2016-11-28 22:56:02
【问题描述】:

如何更改 Change Algolia instantsearch.js stats 模板? (X 结果以 Y m/s 为单位)

根据documentation 可以通过options.template 完成,仅此而已。哪些变量代表结果计数时间,也许还有其他变量?

创建模板的最佳方法是什么?

这是我目前所拥有的:

instantsearch.widgets.stats({
  container: '#stats'
})

我很可能应该补充:

instantsearch.widgets.stats({
  container: '#stats',
  template: '#stats-template'
})

然后是模板(变量应该是什么?):

<script type="text/html" id="stats-template">
    <div data-reactroot="" class="ais-root ais-stats">
      <div class="ais-body ais-stats--body">
        <div>
          {{number of hits}} hits found
        </div>
      </div>
    </div>
</script>

【问题讨论】:

    标签: javascript html algolia


    【解决方案1】:

    Algolia 中的模板工作方式略有不同,您的 instantsearch.widgets.stats 应如下所示:

    instantsearch.widgets.stats({
      container: '#stats', // Your stats container
      templates: {
        body: getTemplate('stats') // Template for displaying stats
      }
    })
    

    和模板:

    <script type="text/html" id="stats-template">
        <div data-reactroot="" class="ais-root ais-stats">
          <div class="ais-body ais-stats--body">
            <div>
              {{nbHits}} products found
            </div>
          </div>
        </div>
    </script>
    

    您可以在统计信息模板中使用的完整变量列表:

    hasManyResults, hasNoResults, hasOneResult, hitsPerPage, nbHits, nbPages, page, processingTimeMS, query

    更多信息:https://community.algolia.com/instantsearch.js/documentation/#stats

    【讨论】:

    • 请注意,此处使用的getTemplate 方法不是instantsearch.js 的一部分,并且似乎是返回script 标记内容的自定义助手。
    【解决方案2】:

    这里有一个例子: https://community.algolia.com/instantsearch.js/documentation/#templates

    search.addWidget(
        instantsearch.widgets.stats({
            container: '#stats',
            templates: {
                body: function(data) {
                    return 'Show ' + data.nbHits + ' results'
                }
            }
        })
    );
    

    【讨论】:

      猜你喜欢
      • 2017-01-03
      • 2017-11-29
      • 2018-04-04
      • 2016-08-07
      • 1970-01-01
      • 2018-02-10
      • 2016-05-27
      • 1970-01-01
      • 2016-04-02
      相关资源
      最近更新 更多