如何使用 Aurelia 观察数组中的数组？答案

【问题标题】：How to observe an array inside an array with Aurelia?如何使用 Aurelia 观察数组中的数组？
【发布时间】：2021-05-21 11:01:36
【问题描述】：

我有一个 people 对象数组，其中每个对象（代表一个人）包含一个 roles 数组：

@observable people = [
  {
    name: 'Name1',
    roles: [
      '1',
      '2'
    ]
  },
  {
    name: 'Name2',
    roles: [
      '3',
      '4'
    ]
  }
]

我希望视图遍历并显示它们（例如repeat.for="role of roles"）。但是，当 people 数组更新时，视图不会更新。 Angular-option 对我不起作用的示例代码：

<select name="roles" multiple class="ui fluid multiple dropdown">
  <option value="">Roles</option>
  <option selected.bind="accounts[2].roles.includes('1')" value="angular">Angular</option>
  <option value="css">CSS</option>
  <option value="design">Graphic Design</option>
  <option value="ember">Ember</option>
</select>

当我初始化 people 数组以包含从一开始就带有 role '1' 的第三人称时，一切正常，但是当我动态添加相同的第三人称（例如通过按钮）时，它不会更新。

我知道如何通过collectionObservers 观察people 数组

this.subscription = this.bindingEngine.collectionObserver(this.people)
  .subscribe(this.peopleChanged.bind(this))

但我对整个 this.people 数组不感兴趣，而是对嵌套数组 roles 数组 inside this.people 感兴趣。如何解决使用 obersers 观察数组中的数组的问题？

【问题讨论】：

标签： arrays aurelia fomantic-ui

【解决方案1】：

我不推荐的东西，但是可以通过简单地迭代和单独绑定来实现。无论如何，我都知道没有顶级绑定函数允许您绑定数组的嵌套数组。

类似的东西

（这是观察角色数组中的特定属性 - 可以轻松更改此属性以对每个角色使用 collectionObserver。）

 bindNestedArrayItems() {
        for (const person of people) {
            for (const role of person.roles) {
                this.bindingEngine
                    .propertyObserver(property, 'property')
                    .subscribe(() => this.peopleChanged(this));
            }
        }
 }

不过，我建议可以为更新的任何地方创建订阅者事件。也许你是一个监听角色变化的 webhook？无论您在哪里聆听/改变，您都可以使用this.eventAggregator.publish('role-updated', {user: user})，然后使用this.eventAggregator.subscribe('role-updated', (data) => { if (data.user) { let userThatUpdated = this.person.find(x => x.Id === data.user.id)} 或其他方式。

这样你就知道发生了什么事，而且你没有一百个财产/收藏观察者。

【讨论】：