带有 Twig 模板的 Algolia Instantsearch - 无法拆分字符串答案

【问题标题】：Algolia Instantsearch with Twig template - can't split string带有 Twig 模板的 Algolia Instantsearch - 无法拆分字符串
【发布时间】：2018-06-06 14:58:29
【问题描述】：

我正在使用 OctoberCMS 并从 Algolia 返回值，Twig 模板似乎无法使用 split() 过滤器进行拆分。

我在每个搜索项中都存储了这样的颜色

["Blue_#3498db","Dark Green_#16a085","Turquoise_#06e5c7"]

根据 Algolia Instantsearch 文档，我的模板是这样的：

<script type="text/html" id="refinementListColourItem-template">
    {% set itemValue = '{{value}}' %}
    <div>
        <a href="#">
            <span>
            {% set tests = itemValue|split('_') %}
            {% for test in tests %}
                {{ test }}
            {% endfor %}
            </span>
        </a>
    </div>
</script>

这将返回完全相同的字符串，而不是按预期将其拆分为下划线。

奇怪的是，如果我手动添加这样的值之一，它可以正常工作

{% set tests = 'Red_#c0392b'|split('_') %}
 {% for test in tests %}
  {{ test }}
 {% endfor %}

如果我 dump() 变量 itemValue 它以字符串形式返回，并且没有被转换为 HTML 特殊字符

【问题讨论】：

你能分享一下你如何设置{{value}}以便我们可以在本地系统中重现
{% set itemValue = '{{value}}' %} - 我不确定您希望在这里发生什么，但是通过此语句，您实际上将文字 {{ value }} 存储在 itemValue 中，这是一个不包含任何 @ 的字符串987654332@，所以您的代码按预期工作...demo

标签： php twig octobercms algolia

【解决方案1】：

我认为您可能对 Algolia Instasearch 的解释有误。 Instasearch 是一个 Javascript API，因此下面的代码（如 cmets 中的@DarkBee 所述）将拆分字符串值"{{value}}"。您在问题中拥有的 Twig 模板将返回以下 HTML。

<script type="text/html" id="refinementListColourItem-template">
<div>
    <a href="#">
        <span>
        {{value}}
        </span>
    </a>
</div>
</script>

以上模板是有效的 Algolia Instasearch 模板。问题是，这是在 InstaSearch API 将您的颜色字符串插入 HMTL 的 {{value}} 部分之前呈现的。

要真正实现您想要的，您实际上需要使用 JavaScript 来格式化响应或更新您的模型以以不同的方式存储颜色。 JavaScript（和添加）应该可以让您大部分时间到达那里。该代码未经测试，可能会得到改进。

//assuming your algolia javascript variable is called search, and you have jQuery included on the page (common for OctoberCMS)
search.on('render', function() {
   $(".color").each(function(){
     var colour = $(this).text().split("_")[0];
     $(this).text(colour); //will output first part of the text value
   });
});

search.start();

另外，对您的模板进行以下更改：

<script type="text/html" id="refinementListColourItem-template">
<div>
    <a href="#">
        <span class="color">
        {{value}}
        </span>
    </a>
</div>
</script>

【讨论】：