Question

我正在使用Aurelia和TypeScript。我正在尝试将对象绑定到视图，我希望在更改对象的属性时更新视图。我知道Aurelia只会观察物体和一些阵列操作（推，拼接等）。我也知道有一些绑定助手，比如@computedFrom和使用BindingEngine但是在使用值转换器时我仍然找不到最好的方法。

在我的例子中，我在TypeScript中有类，例如“班车”。然后我将多个汽车对象绑定到视图，例如$ {car1}，$ {car2}等。我添加了一个值转换器来展示汽车，例如： $ {car1 | carPresenter}。这显示如下信息：“一辆满载坦克和三名乘客的蓝色汽车”。如果我改变汽车财产，例如“car1.passengers ++”然后我想要$ {car1 | carPresenter}更新。

也许价值转换器是错误的做法？如果是这种情况，请告知更好的方法。我希望通过展示它的一些属性来呈现复杂的对象，但不一定是所有这些属性。当基础属性发生变化时，这些演示文稿应该更新。

我创建了一个带有简化示例的要点，说明了问题： https://gist.run/?id=06287de5eb179b32fa0b134eb59ebc68

Answer 1

您可以利用额外的绑定装饰器：@observable [related docs]。

更多信息：Working With Aurelia @observable（Dwayne的博客是学习Aurelia非常有用的资源）。

要点演示：https://gist.run/?id=c359860951717457e630e3fde1a4d6aa

在此演示中，Car对象定义了自己的类，其中所有必需的属性都有@observable装饰器。值转换器已被description getter方法取代。

车级

import { observable } from 'aurelia-framework';

export class Car {
    @observable
    color;

    @observable
    gasLevel;

    @observable
    passengers;

    constructor(data) {
        // ...
    }

    get description() {
        return `A ${this.color} car with ${this.gasLevel} tank and ${this.passengers} passengers`;
    }
}

属性更改时更新Aurelia绑定

1 个答案: