Question

我猜这背后有一些原因，但如果我的虚拟机中有一个阵列并push()，我的@computedFrom方法就不会更新。如果我改为使用concat()（并且基本上完成与推送相同的操作），更新：

import { computedFrom } from 'aurelia-framework';

export class MyVm {
    constructor () {
        this.list = [{name: 'Foo', id: 0, open: true}, {name: 'Bar', id: 1, open: false}];

        setTimeout(() => {
            this.list.push({name: 'Baz', id: 2, open: true}); // This won't update numOpenListItems
            this.list = this.list.concat([{name: 'Baz', id: 2, open: true}]); // This will
        });
    }

    @computedFrom('list')
    get numOpenListItems () {
        return this.list.filter(item => item.open === true).length;
    }
}

为了代码清晰度（以及可能的性能），我更喜欢使用push()，我有什么办法吗？

Answer 1

目前，computedFrom使用属性观察者，而不是数组观察者。

要解决您的问题，我会退后一步，根本不使用带有吸气剂的computedFrom。如果要强制进行数组订阅，请使用绑定信号。

<强> home.html的

<div with.bind="list | open & signal: 'store:add'">
  ${length}
</div>

<强> home.js

import { inject } from 'aurelia-framework';
import { BindingSignaler } from 'aurelia-templating-resources';

@inject(BindingSignaler)
export class HomeViewModel

    constructor(signaler) {
        this.signaler = signaler
    }

    add(store) {
        this.list.push(store)
        this.signaler.signal('store:add')
    }
}

以下是一个有效的例子：https://gist.run/?id=9681fab58b1b6494dfdca13e018ff3e9

另外，我写了一个名为Bouncer的全功能滤波器值转换器。您可以在此处查看（http://foursails.github.io/bouncer/）或在此处获取来源（https://github.com/Foursails/bouncer）。

calculateFrom数组在push（）时不会更新，但在重新分配时有效

1 个答案: