多负荷OOB按钮小枝

Question

我试图创建多个动态加载，更多的oob按钮使用小枝插件，在工艺CMS，他们是正确的出现。但是，当one按钮将与隐藏的按钮交换时，就会出现这个问题，这会导致所有加载的按钮消失。

下面是我测试过的for循环代码：

{% for city in cities %}
    {% set articleOffset = articleOffset ?? 0 %}
    {% set articlesQuery = cityArticles[loop.index0].offset(articleOffset).limit(articleLimit) %}
    {% set articles = articlesQuery.all() %}

    <div class="filtered-bookmark mb-5">
        <span> {{ city.title }}</span>
        <div class="row" id="container-{{ city.slug }}">
            {% for article in articles %}
                {% set featureImage = article.articleFeaturedImage.one().url ?? "" %}
                {% set categorySlug = article.channelsCategory.one().channel.one().slug %}

                <section class="col-12 col-sm-6 col-xl-4 mb-4">
                    {#article card template here#}
                </section>
            {% endfor %}
        </div>
        
        {% if articlesQuery.count() > articles|length + articleOffset %}
            <button id="{{city.slug}}-oob" sprig  
                s-val:articleOffset="{{ articleOffset + articleLimit }}" 
                s-target="#container-{{ city.slug }}" 
                s-select="#container-{{ city.slug }} section"
                s-swap="beforeend"
                {{ sprig.trigger == city.slug ~ '-oob' ? 's-swap-oob="true"' }}> View More </button>
        {% else %}
            <button id="{{ city.slug }}-oob" s-swap-oob="true" style="display: none"></button>
        {% endif %}
    </div>
{% endfor %}

Answer 1

问了关于PutYourLightsOn的小枝GitHub的问题，得到了答复。这就是诀窍：

<button id="{{ city.slug }}-oob" {{ sprig.trigger == city.slug ~ '-oob' ? 's-swap-oob="true"' }} style="display: none"></button>

参考GitHub链接：https://github.com/putyourlightson/craft-sprig/issues/247