在instantsearch.js小部件中使用hogan模板

时间:2016-02-08 16:12:33

标签: javascript hogan.js algolia

我正在尝试实现algolias instansearch.js。我的搜索结果会有很多HTML,所以我想把它提取到一个hogan模板中。结果似乎正在加载但没有渲染?

<script type="text/template" id="hit-template">
  {{#hits}}
  <div class="hit">
    <div class="hit-image">
      <p>test: {{ objectID }}</p>
    </div>
  </div>
  {{/hits}}
</script>

<script>
var hitTemplate = Hogan.compile($('#hit-template').text());

search.addWidget(
  instantsearch.widgets.hits({
container: '#hits-container',
templates: {
  empty: 'No results',
  item: function(data){
    return hitTemplate.render(data);
      }
    },
    hitsPerPage: 6
  })
);
</script>

非常感谢任何帮助

1 个答案:

答案 0 :(得分:1)

您不需要自己使用Hogan,只需向我们提供模板:

var hitTemplate = document.querySelector(&#39;#hit-template&#39;)。innerHTML;

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits-container',
    templates: {
      empty: 'No results',
      item: hitTemplate
    },
    hitsPerPage: 6
  )
);

同时检查控制台是否有错误消息。感谢