Javascript aurelia中repeat.for的绑定问题
我有一个我填充的卡片列表,当我点击我想要获得的每张卡片并显示该卡片显示的正确项目时。 我面临的问题是,当我返回数组时,它没有将正确的项绑定到特定的卡 这是我的HTMLJavascript aurelia中repeat.for的绑定问题,javascript,typescript,aurelia,Javascript,Typescript,Aurelia,我有一个我填充的卡片列表,当我点击我想要获得的每张卡片并显示该卡片显示的正确项目时。 我面临的问题是,当我返回数组时,它没有将正确的项绑定到特定的卡 这是我的HTML <div repeat.for="Grouping of categoryItems"> <div class="row"> <div class="col s12
<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>
因此,this.categoryItemsTypes具有以下数组
0: {name: "Clothes", items: Array(3)}
1: {name: "Shoes", items: Array(2)}
因此,当页面加载时,它会按如下方式加载卡片
然后当我点击“衣服”
我只希望它加载与衣服相关联的数组,如果单击“shoes”,则只加载该数组,如下所示
但是我上面的代码目前发生了以下情况
这一行是我绑定项目的地方
repeat.for="item of categoryItemsTypes.items"
如何将项目绑定到正确的${Grouping.name},如图2所示?您的操作方向正确,但尚未完成。 您应该更喜欢aurelia绑定基础,而不是数组赋值,因为数组赋值没有被观察到,所以数组赋值的效果不太好。 通常,当使用一组新的元素填充数组时,您应该更喜欢:
destarray.splice(0,destarray.length,…sourcearray)代码>
结束
destarray=sourcearray代码>
因为前者是aurelia默认观察到的,后者不是
在这里,我在一个沙盒上复制了一个简化的代码,供您查看:
致以最良好的祝愿
repeat.for="item of categoryItemsTypes.items"