Question

我是Aurelia的新手。我正在浏览一些例子并看到这个。它有一个列出（cars.js）所有汽车的页面，并有一个创建按钮，可以将您重定向到另一个可以输入新车的页面（ addCar.js），一旦点击保存，您将被重定向到汽车列表。很简单。

我的问题是，新增的汽车是如何进入汽车列表的？此示例使用存储库抽象所有与api的交互。这些文件是否共享this.cars的相同实例？

dataRepository.js

@inject(HttpClient)
export class DataRepository {
    constructor(httpClient) {
        this.httpClient = httpClient;
    }

getCars() {
    var promise = new Promise((resolve, reject) => {
        if (!this.cars) {
            this.httpClient.fetch('api/Cars')
            .then(response => response.json())
            .then( data => {
                this.cars = data;
                resolve(this.cars);
            }).catch(err => reject(err));
        }
        else
            resolve(this.cars);
    });
    return promise;
}

    addCar(car) {
        var promise = new Promise((resolve, reject) => {
            this.httpClient.fetch('api/Cars',{
                method: 'POST',
                body: json(car)
            }).then(response => response.json())
            .then(data => {
                this.cars.push(data); // <-- here, how does this pass the related data to cars.js?
                resolve(data);
            }).catch(err=>reject(err));
        });
        return promise;
    }
}

addCar.js

@inject(DataRepository)
export class AddCar {
    constructor(dataRepository) {
        this.car = { carType: "Big" };
        this.dataRepository = dataRepository;
    }

    activate(params, routeConfig, navigationInstruction) {
        this.router = navigationInstruction.router;
    }

    save() {
        this.validation.validate().then(()=>{
            this.dataRepository.addCar(this.car).then(car=> this.router.navigateToRoute('cars'));
        });
    }
}

cars.js

@inject(DataRepository)
export class Cars {
    constructor(dataRepository) {
        this.dataRepository = dataRepository;
    }

    activate(params, routeConfig, navigationInstruction) {
        this.cars = [];
        this.router = navigationInstruction.router;
        return this.dataRepository.getCars().then(cars => {
            this.cars = cars;
        });
    }

    addCar() {
        this.router.navigateToRoute("addCar");
    }
}

Answer 1

在不了解Aurelia的具体细节的情况下，我认为它使用的是单实例依赖注入（因此是@inject指令）。该实例具有汽车集合，并且在传递给依赖的构造函数时，被设置为实例成员。可以找到更多信息here。

使用存储库将对象推送到数组

1 个答案: