使用 Algolia 进行 Hogan 模板答案

【问题标题】：Hogan templating with Algolia使用 Algolia 进行 Hogan 模板
【发布时间】：2017-11-17 01:01:20
【问题描述】：

我目前正在使用 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 %}

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

警告：失败的道具类型：无效的道具templates.item 提供给 t.

Template.js:117 未捕获的错误：模板必须是“字符串”或 “功能”，是“对象”（键：项目）

【问题讨论】：

标签： javascript templates algolia hogan.js instantsearch.js

【解决方案1】：

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

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

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

【讨论】：

感谢您的回答 - 不幸的是，现在我得到以下信息：未捕获的 TypeError: Cannot read property 'textContent' of null
通过将脚本移动到模板下方可以消除错误 - 但不会呈现任何命中模板。
阅读下面的答案以获得完整的答案。

【解决方案2】：

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

【讨论】：