javascript - aurelia 中 repeat.for 的绑定问题
问题描述
我有一个要填充的卡片列表,当我单击要获取的每张卡片并显示为该卡片显示的正确项目时。我面临的问题是,当我返回一个数组时,它没有将正确的项目绑定到特定的卡上。
这是我的 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>
我的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;
}
}
所以 this.categoryItemsTypes 有以下数组
0: {name: "Clothes", items: Array(3)}
1: {name: "Shoes", items: Array(2)}
因此,当页面加载时,它会按如下方式加载卡片
然后当我单击“衣服”时,我只希望它加载与衣服关联的数组,如果单击“鞋子”,则只加载该数组,如下所示
但是我上面的代码目前正在发生的事情如下
这条线是我绑定项目的地方
repeat.for="item of categoryItemsTypes.items"
如何将项目绑定到正确的 ${Grouping.name},如图 2 所示?
解决方案
你在正确的方向,但还没有完成。您应该更喜欢 aurelia 绑定基础知识而不是数组分配,这不太好,因为没有观察到数组分配。通常,当使用一组新元素填充数组时,您应该更喜欢:
destarray.splice(0, destarray.length, ...sourcearray);
超过
destarray = sourcearray;
因为前者默认被 aurelia 观察到,而后者则没有。
在这里,我在沙箱上复制了您的代码的简化供您查看:
最良好的祝愿。
推荐阅读
- android - 无法使用 minifyEnabled 运行 Android 检测 (UI) 测试
- javascript - Javascript - 有限制的多文件上传器
- php - PHP 代码在 LocalHost 中有效,但在服务器上无效
- jmeter - 我们可以在 JMeter 的 IF 控制器中使用 CSV 数据集配置吗
- laravel - 使用 flush() 或 forget() 时,Laravel Session 不会被删除
- reactjs - 如何使用 React Hooks 在不同页面中显示嵌套路由..?
- javascript - 如何访问数组中对象的变量和方法 [已解决]
- linux - 远程计算机上的 ZSH 环境损坏,通过 ssh 登录后立即崩溃
- excel - 如何读取现有的 Excel 电子表格单元格(或多个单元格)
- pandas - 如何分组和合并这些火花数据框组的行