Hogan 模板与 Algolia

Question

我目前正在使用 Algolia + Hogan 制作模板。但是我经常运行出现以下错误，我是运行 CraftCMS 上的 Algolia。

<script>

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

    const search = instantsearch({
      appId: '{{ craft.searchPlus.getAlgoliaApplicationId }}',
      apiKey: '{{ craft.searchPlus.getAlgoliaSearchApiKey }}',
      indexName: 'products',
      urlSync: true
    });

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

    search.start();

</script>

这是我的命中模板。 Raw 因为 CraftCMS 从 .

抛出错误

{% raw %}

  <script type="text/template" id="hit-template">
          {{#hits}}
          <li>
              <h4><a href="{{ absoluteUri }}">{{ title }}</a></h4>
              {{{ description }}}
              <p>{{#productImage}}</p>
                <img src="{{ url }}"/>
              {{/productImage}}
          </li>
          {{/hits}}
  </script>

{% endraw %}

通过控制台获取以下错误。

Warning: Failed prop type: Invalid prop templates.item supplied to t.

Template.js:117 Uncaught Error: Template must be 'string' or 'function', was 'object' (key: item)

Answer 1

不需要自己编译模板，你可以这样做：

var hitTemplate = document.querySelector('#hit-template').textContent;

这应该可以解决您的问题。

Answer 2

已通过删除 {{#hits}} 块并添加@vvo 答案进行修复。

Hogan 模板与 Algolia

Hogan templating with Algolia

javascript

templates

algolia

hogan.js

instantsearch.js