javascript - Twig JS (gulp-twig) - 牢记 DRY 原则遍历大型数据结构

Question

长话短说

有没有一种方法可以通过编程方式重新分配 Twig 部分从中读取数据的位置？我有一个 JSON block ，它为模式库中的元素提供数据结构，并且需要确保 Twig 将正确的数据提供给相应的 .twig。部分文件。

背景

我有以下 JSON 数据:

button.json(简化)

{
    "element": {
        "button": {
            "attr": {
                "class": "btn"
            },
            "subelement": {
                "span": {
                    "attr": {
                        "class": "btn__text"
                    },
                    "content": {
                        "text": "Button Text"
                    }
                }  
            }
        }
    }
}

以及以下 Twig 模板:

button.twig(简化)

{% set base = 'button' %}
{% set el = element[base] %}

<button type="button"
{% include '_partial/_attr.class.twig' %}
>

    {% set el = element[base].subelement.span %}

    {% include 'span.twig' with { el: el } %}
    </span> {# <span> closes here as it could have subsequent elements inside it #}

</button>

span.twig(简体)

<span
{% include '_partial/_attr.class.twig' %}
>

{% if el.content.text %}
    {{ el.content.text }}
{% endif %}

还有一个 Twig 部分:

_attr.class.twig

{% if el.attr.class %}
    class="{{ el.attr.class }}"
{% endif %}

上面呈现了以下 HTML:

<button type="button" class="btn">
    <span class="btn__text">Button Text</span>
</button>

这些文件都有助于我打算完全干燥的模式库(因此是部分文件(许多文件之一))。我想让所有的东西都尽可能的可重用，所以 <button>或 <span>可以声明一次但在许多不同的上下文中使用。

问题

在button.twig我硬编码 {% set el = element[base].subelement.span %}更改 el 的值(以便 <span> 获得正确的数据)。此语法仅在只有 subelement 级别时才有效.

考虑这个结构:

<form>
    <div class="form-element>
        <label>Label Example</label>
        <input type="text">
    </span>
</form>

我对如何访问 <label> 的数据感到困惑和 <input>因为我尝试过的所有排列(例如 element[base].subelement.div.subelement.label 和 element[base.subelement.div].subelement.label)都不起作用。

我想要实现的是一种遍历数据对象的可靠方法，这样我就可以拥有 x 元素深度的标记结构。

到目前为止我的想法是:

• 使用 JS 函数创建对象键引用(在将返回的字符串返回到 Twig 对象引用时遇到问题)
• 创建一种“跟踪器”来跟踪我在数据结构中的深度(同样，我在考虑一个 JS 函数，它可以告诉 Twig x 元素在数据结构中的深度)
• 重新格式化数据结构，以便用另一种方式表示层次结构)
• 我重新分配 el 是否正确？以便它始终代表当前元素？
• 我也尝试过使用 attribute(base, xxx)无济于事

Answer 1

事实证明，我对它的思考过度了，因为 Twig 已经内置了出色的“内容切换”，利用了它的 with 语句。

现在一切都是这样......

首先，我将所有 subelement 对象转换为数组，因此我的 button.json 文件将如下所示:

button.twig(简化)

{
    "element": {
        "button": {
            "attr": {
                "class": "btn"
            },
            "subelement": [
                {
                    "span": {
                        "attr": {
                            "class": "btn__text"
                        },
                        "content": {
                            "text": "Button Text"
                        }
                }
            ]
        }
    }
}

然后我可以在我的 twig 模板中使用类似的东西来做我所谓的“上下文切换”:

button.twig(简化)

{% set root = root.subcomponent[0] %}

{# _button_text_ #}
    {# <span> #}
        {% include '../_partial/_text.span.twig' with { root: root._button_text_ } %}
    </span>
{# /_button_text_ #}

关键是将 with { foo: bar } 与 include 一起使用，因为它会“转换”组件从 JSON 中读取数据的位置。另外，我知道 span 总是 subcomponent[0] 所以使用起来完全安全。如果需要，该语句始终可以包含在条件语句中，例如:

{% if root.subcomponent[0] == '_button_text_' %}
    {% set root = root.subcomponent[0] %}
{% endif %}

或者对于多个(重复的)子元素:

{% for subcomponent in root.subcomponent %}
    {# _description_list_item_ #}
        {# <div> #}
            {% include '../../../atom/structure/_partial/_structure.division.twig' with { root: subcomponent._description_list_item_ } %}

            {% set root = subcomponent._description_list_item_ %}

            {# _description_term_ #}
                {% include '../../../atom/text/_partial/_text.description-term.twig' with { root: root.subcomponent[0]._description_term_ } %}
            {# /_description_term_ #}

            {# _description_details_ #}
                {% include '../../../atom/text/_partial/_text.description-details.twig' with { root: root.subcomponent[1]._description_details_ } %}
            {# /_description_details_ #}

        </div>
    {# /_description_list_item_ #}

{% endfor %}