javascript - Django 和 algolia - 使用 hogan + {% verbatim %} 标签的条件语句

Question

我希望这不是一个太晦涩的问题 - 我正在将 Algolia 搜索平台集成到我的一个项目中，以便能够无缝且轻松地进行搜索 yadda yadda。本质上，我正在寻找 Algolia 的 #hit-template 元素中业务目录的高级和低级布局的混合......逐字使用 {% if %} 不会相当工作......所以显然有一些我不理解/遗漏的东西。我需要纯粹在 javascript 中编辑某些内容吗？没有把握!什么是{%逐字%}？没有把握？!我可以在 type="text/template"的脚本中混合使用 javascript 和 html 吗？

{% verbatim %}
    <script id="hit-template" type="text/template">
      {% if _highlightResult.is_premium %}
      <div class="card text-center mb-3">
        <div class="crop-height bg-image-card card-header" style="background-image: url('{{ MEDIA_URL }}{{ get_image_url }}'); height: 160px !important;"></div>
        <div class="card-header" style="color: #fff !important; background-color: {{ brand_colour }} !important; font-size: 1.3rem;">
          {{{ _highlightResult.name.value }}}
        </div>
        <div class="card-body">
          <p class="card-text" style="color: {{ business.brand_colour }} !important;"><a href="https://www.google.co.uk/maps/search/{{ google_maps_location }}" style="color: {{ brand_colour }};"><i class="fas fa-map-marker fa-2x" data-fa-transform="down-6"></i></a></p>
          <p class="card-text"><small>{{ get_full_address }}</small></p>
          <p class="card-text p-2">{{ description }}</p>
          <a href="{{ absolute_url }}" class="btn btn-primary" style="background-color: {{ brand_colour }} !important; border-color: {{ brand_colour }} !important; color: #fff;">Visit Website</a>
        </div>
        <div class="card-footer text-muted">
          <small>
            <i class="fas fa-envelope" data-fa-transform="shrink-2"></i> {{ email }}
            <i class="fas fa-phone" data-fa-transform="shrink-2"></i> {{ telephone }}</small></div>
        <div style="display: none;">{{{ _highlightResult.sector.value }}}</div>
      </div>
      {% else %}
      {% endif %}
    </script>
  {% endverbatim %}

Answer 1

{% verbatim %} 强制 Django 不解释模板文件中的 { 和 } 字符，因此 {% if %} 和 {% endif %} 在逐字标记内不起作用。您仍然可以在 verbatim 标记之外使用 Django 模板语法，并且仅在您希望 Django 忽略 {} 的地方使用 {% verbatim %} (即在你的 Javascript 语法中)。

混合不同的模板语法时，可能很难解决使用 { 等特殊字符的歧义。解释器引擎无法解析您的意图。这里的一种解决方案是使用 Django 将您需要的变量存储到 Javascript 变量中，并使用 hogan.js 来处理它们。

<script>
    window.MEDIA_URL = {{ MEDIA_URL }}
    window.image_url = {{ get_image_url }}
</script>
{% if _highlightResult.is_premium %}
{% verbatim %}
    <script id="hit-template" type="text/template">
        // your Hogan.js stuff here, using `window` variables from Django stored as JS variables...
        // Django will no longer interpret `{` and `}`, only Hogan.js will
    </script>
{% endverbatim %}
{% endif %}

我对 Hogan.js 的了解还不够，无法指导您进一步了解具体细节。