javascript - 使用 Algolia 进行 Hogan 模板化

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>

这是我的热门模板。原始的，因为 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;

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