Skip to content

Binding issue in repeat.for in aurelia

I have a list of cards that i populate, when i click on each card i want to get and display the correct items displayed for that card. The problem i am facing is that when i return an array its not binding the correct item to the specific card.

This is my HTML

<div repeat.for="Grouping of categoryItems">
                    <div class="row">
                        <div class="col s12 m3 l3">
                            <div class="card blue-grey darken-1">
                                <div class="card-content" style="padding:10px">
                                    <span class="card-title white-text truncate">${Grouping.name}</span>
                                    <a if.bind="Grouping.hideDetails" class="btn-floating halfway-fab waves-effect waves-light" click.delegate="Activate(list, Grouping)"><i class="material-icons">add</i></a>                                     
                                </div>
                            </div>
                        </div>
                    </div>
                    <div repeat.for="categoryGroupingTypes of categoryItemTypes">
                        <div class="row" if.bind="!Grouping.hideDetails">


                            
                            <div class="col" style="position:absolute;padding:5%">
                                <div class="rotate-text-90-negative">
                                    <span class="blue-grey-text"><b>${categoryGroupingTypes.name}</b></span>
                                </div>

                            </div>
                            <div repeat.for="item of categoryItemsTypes.items" class="col s12 m3 l3 ">
                                
                                    <div class="card-content">
                                        <span class="card-title white-text truncate">${items.Name} ${items.Quantity}</span>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>                  
                     </div>

my ts

async Activate(list: ListModel[], grouping: any) {
            
        this.categoryItemsTypes = await this.getTypes(list);
        let result = this.categoryItem.filter(x => x.name == grouping.name)
        if (result) {
            grouping.hideDetails = false;
        }
            
    }

so this.categoryItemsTypes has the following array

0: {name: "Clothes", items: Array(3)}
1: {name: "Shoes", items: Array(2)}

so when the page loads it loads the cards as follows

LOADS GROUPING NAME NAME

then when i click on “Clothes” i only want it to load the array associated with clothes and if “shoes” is clicked then only load that array as follows

what i want

but what is currently happening with my above code is the following

wrong

this line is where i bind the items

repeat.for="item of categoryItemsTypes.items"

how can i bind the items to the correct ${Grouping.name} as shown in picture 2?

Answer

You are in the right direction, but not complete yet. You should prefer aurelia binding basics over array assignment, which doesn’t work quite well, because array assignments are not observed. In general, when populating arrays with a new set of elements, you should prefer:

destarray.splice(0, destarray.length, ...sourcearray);

over

destarray = sourcearray;

because the former is observed by aurelia by default and the latter is not.

Here I reproduced a simplification of your code on a sandbox for you to check out:

click here for sandbox

Best wishes.