捕获液体中的两个变量 [英] Capture two variables in liquid

问题描述

我想做什么：

捕获两个变量{{section.settings.{{title}}_modal_title}}

上下文：

链接表中的链接并不是真正用作链接，而纯粹是为了让用户可以在他们的Shopify门户中重新组织它。 外部javascript文件在单击事件时创建元素(模态)，应在创建的模态中使用section.settings.XXX_modal_title中的值。

链接列表：

<ul class="menu">
            {% for link in linklists.main-menu.links %}
                <li data-menu="{{ link.title | upcase }}" class="menu-link">
                    <p class="menu-title">[{{ link.title | upcase }}]</p> <-- Click event
                </li>
            {% endfor %}
        </ul>

我尝试的内容：

• 我的第一次尝试是在创建元素时使用.insertAdjacentHTML('afterbegin', {{section.settings.${attLowerCase}_modal_title}})添加Liquid标记本身，但很快就意识到Liquid首先呈现这些值。执行此操作的输出从字面上看是&qot；{{}}&qot；

• 我的第二次尝试是捕获两个变量并将其放入隐藏输入中。

{% assign title = link.title | downcase %}
                    {% capture section_title_variable %}
                        {{section.settings.{{title}}_modal_settings}}
                    {% endcapture %}
                    <hr class="item-line">
                    <p class="ueq-menu-title">[{{ link.title | upcase }}]</p>
                    <input type="hidden" id="about_modal_title" value="{{section_title_variable}}">

深入示例：

section.settings

{
            "type": "text",
            "id": "about_modal_title",
            "label": "About window title",
            "default": "ABOUT"
},

• 用户单击关于
的链接

<ul class="menu">
            {% for link in linklists.ueq-menu.links %}
                <li data-menu="{{ link.title | upcase }}" class="menu-link"> <-- "ABOUT"

                    {% assign title = link.title | downcase %} <-- downcase to "about"
                    {% capture section_title_variable %}
                        {{section.settings.{{title}}_modal_title}}
                        
                    {% endcapture %}
                    <hr class="item-line">
                    <p class="menu-title">[{{ link.title | upcase }}]</p>
                    <input type="hidden" id="about_modal_title" value="{{section_title_variable}}"> <-- captured should look like this {{section.settings.about_modal_title}}


                </li>
            {% endfor %}
        </ul>

• 单击事件时，从隐藏输入获取值，并在创建元素时使用它。

为什么不使用{% javascript %}？

(&Q；)

我更喜欢这样做，因为我的大多数脚本文件都是外部的。我喜欢保持这种状态。

为什么要这样捕获它？

链接列表中的链接已知，这在设计中已有。这就是为什么在sechema中，其中一个被称为About_MODEL_TITLE"；。因为这是在for循环中使用的，所以这是我能想出的将标题和架构设置相互连接的唯一方法。

如果有人知道更好的方法而不是将其放在隐藏输入中，请让我知道：)

推荐答案

在正确的液态语法中，花括号永远不会嵌入到花括号中

语法{{ something_{{ you }}_want }}是非法的液态语法-一旦使用{{或{%启动表达式，直到下一个}}或%}的所有内容都将作为一个模板命令进行计算。

在您的示例中，您希望组合两个字符串，以便获得要访问的设置的名称。在专用的编程语言中，我们希望这样的事情有很好的快捷方式。但是，Liquid首先是一种模板化语言，没有这样的快捷方式。相反，我们需要分两步实现我们的目标。

我们需要知道的第一件事是我们可以通过两种方式访问属性：{{ settings.fieldname }}等同于{{ settings['fieldname'] }}

多亏了第二个语法，我们可以使用变量访问任意设置：

{% assign field = 'fieldname' %}
{{ settings[fieldname] }}

因此，要做更复杂的事情，我们只需使用assign(或capture-只需注意捕获也包括空格！)要获取包含我们要访问的字段名称的变量，请将其传入方括号：

{% assign title_field = link.title | downcase | append: '_modal_title' %}
{{ section.settings[title_field] }}

这篇关于捕获液体中的两个变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！