Pousser un objet dans un tableau en utilisant un dépôt

Question

Je suis nouveau à Aurelia. Et je passe en revue quelques exemples et j'ai vu celui-ci. Il a cette page que listes (cars.js) toutes les voitures et a un bouton créer qui vous redirige vers une autre page où vous pouvez entrer une nouvelle voiture (addCar.js), une fois que vous cliquez sur Enregistrer, vous serez redirigé aux listes de voitures. Assez simple.

Ma question est la suivante: comment la nouvelle voiture est-elle poussée vers les listes de voitures? Cet exemple utilise un référentiel pour résumer toute l'interaction à l'API. Est-ce que les fichiers partagent la même instance de 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

Sans KNO Je dirais qu'il utilise une injection de dépendance à instance unique (d'où la directive @inject). Cette instance contient la collection de voitures et, lorsqu'elle est transmise au constructeur du dépendant, est définie en tant que membre d'instance. Plus d'infos peut être trouvé here.