如何用 Aurelia 观察数组中的数组？

Question

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

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

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

<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 数组不感兴趣，但对 nested 数组 roles 数组 inside this.people。我怎样才能解决这个用观察者观察数组内部数组的问题？

Answer 1

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

像这样

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

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

不过，我建议可以为更新的位置创建一个订阅者事件。也许你是一个 webhook 来监听角色是否改变？无论你的 listening/changing 你可以做 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)} 什么的。

这样你就知道发生了什么事而且你没有一百个 property/collection 观察员。

如何用 Aurelia 观察数组中的数组？

How to observe an array inside an array with Aurelia?

arrays

aurelia

fomantic-ui