Tapestry AjaxFormLoop rows affecting each other's values, why?

问题

I have an ajaxFormLoop on a list of objects that have some fields.

<div class="col-1-1"
    data-parent-subprovider="parentSubprovider">
    <div t:type="ajaxformloop" t:id="subproviderLoop"
        t:source="entity.contractSubprovider.subproviderList"
        t:element="entity.contractSubprovider"
        t:value="subprovider" t:encoder="subproviderLoopEncoder">
        <div class="col-3-4">
            <t:subproviderEdit
                t:subprovider="subprovider" />
        </div>
        <div class="col-1-4">
            <t:removerowlink class="btn btn--outline"
                name="subprovider" style="margin-top: 5px">
                ${message:remove-subprovider-button}
            </t:removerowlink>
        </div>
        <p:addRow>
            <div class="col-3-4">
                <a t:type="addRowLink" t:mixins="LayoutButton"
                    t:color="green" class="margin--top">
                    <i class="fa fa-plus-circle"></i>
                    ${message:add-subprovider-button}
                </a>
            </div>
        </p:addRow>
    </div>
</div>

In the frontend there is a dropdown menu entityContractSubproviderSubCategoryofoutsourcedserviceRequired that gets filled with new choices when another dropdown menu entityContractSubproviderCategoryofoutsourcedserviceRequired value changes.

<div data-fragment-container="categoryofoutsourcedserviceSubproviderContainer">
    <div class="form__row">

        <div class="col-1-4 inline">
            <div t:type="LayoutSelectList"
                 t:model="entityCategoryofoutsourcedserviceModel"
                 t:id="entityContractSubproviderCategoryofoutsourcedserviceRequired"
                 t:value="subprovider.categoryofoutsourcedservice"
                 t:valueEncoder="categoryofoutsourcedserviceValueEncoder"
                 t:blankOption="ALWAYS"
                 t:mixins="ExclusiveTriggerFragment,DpmFormGroup"
                 data-for-trigger-group="categoryofoutsourcedserviceSubproviderGroup"
                 data-fragment-container-id="categoryofoutsourcedserviceSubproviderContainer"
                 t:async="true"
                 zone="categoryOfSubModelZone"/>
        </div>
        <div class="form__row" t:type="if" t:test="true"
             t:id="entityContractSubproviderSubCategoryofoutsourcedserviceRequired">
            <div data-fragment-trigger="CRM, ICT, CONTROLFUNCTIONS, REPORTING, RISKMANAGEMENT, TREASURY, SECURITIES, PAYMENTS, OTHER" t:type="formFragment"
                 data-trigger-group="categoryofoutsourcedserviceSubproviderGroup"
                 data-fragment-detection="any"
                 t:visible="subproviderCategoryofoutsourcedserviceActive">
                <div class="form__row">
                <t:zone t:id="categoryOfSubModelZone" id="categoryOfSubModelZone" style="display: inline;">
                    <div class="col-1-4 inline">
                        <div t:type="LayoutSelectList" t:blankOption="ALWAYS"
                         t:model="entitySubCategoryofoutsourcedserviceModel"
                         t:label="message:entityContractSubproviderSubCategoryofoutsourcedserviceRequired-label"
                         t:value="subprovider.subcategoryofoutsourcedservice"
                          t:valueEncoder="subCategoryOfOutsourcedServiceValueEncoder"
                         t:mixins="ExclusiveTriggerFragment,FormGroup"/>
                    </div>
                </t:zone>       
                </div>
            </div>
        </div>
    </div>
</div>

The problem is whenever I add a new row and change the category dropdown choice , the subcategory menu changes in all the rows. I want it to be changed in its own row only

来源：https://stackoverflow.com/questions/55394029/tapestry-ajaxformloop-rows-affecting-each-others-values-why