Des listes déroulantes dépendantes avec Aurelia?

Question

J'ai une http-api je peux utiliser pour interroger au sujet des choses liées à la voiture avec des objets modèles comme ceux-ci qui sortent de l'api:

class Manufacturer { 
    id: string; 
    name: string; 
} 

class CarType { 
    id: string; 
    model: string; 
} 

class Variant { 
    id: string; 
    picture: string; // an URL 
} 

et ces méthodes pour obtenir les données:

function getManufacturers(): Promise<Manufacturer[]>; 
function getCarTypesOfManufacturer(manufacturerId: string): Promise<CarType[]>; 
function getVariantsofCarTypes(maufacturerId: string, carTypeId: string): Promise<Variant[]>; 

Maintenant, je dois utiliser Aurelia pour implémenter les sélections à liste déroulante dépendante afin que quelqu'un d'abord puisse sélectionner un fabricant, puis obtient tous les CarTypes, puis toutes les variantes pour ce fabricant et CarType. Après avoir cette sélection, j'ai besoin de stocker les objets de modèle récupérés dans un autre objet de modèle qui sera stocké dans une base de données plus tard.

Je n'ai aucune idée de comment structurer cela avec le système de reliure aurelia. Des idées?

Answer 1

Vous pouvez commencer par récupérer la liste des fabricants utilisant getManufacturers() et lier le résultat à la liste déroulante.

ts:

manufacturers: Manufacturer[]; 
selectedManufacturerId: string; 

html:

<label> 
    Select manufacturer:<br/> 
    <select value.bind="selectedManufacturerId"> 
    option model.bind="null">Choose...</option> 
    <option repeat.for="manufacturer of manufacturers" 
      model.bind="manufacturer.id"> 
     ${manufacturer.name} 
    </option> 
    </select> 
</label> 

observe alors la propriété selectedManufacturerId et quand il change récupérer les types de voitures en relation avec getCarTypesOfManufacturer (id).

ts:

carTypes: CarType[]; 
selectedCarTypeId: string; 

html:

<label> 
    Select a car type:<br/> 
    <select value.bind="selectedCarTypeId"> 
    option model.bind="null">Choose...</option> 
    <option repeat.for="carType of carTypes" 
      model.bind="carType.id"> 
     ${carType.model} 
    </option> 
    </select> 
</label> 

puis faire la même chose pour la variante.

vous pouvez observer les propriétés (selectedManufacturerId et selectedCarTypeId) en utilisant propertyObserver et récupérer les données dans le gestionnaire de changement:

this.bindingEngine 
    .propertyObserver(this, 'selectedManufacturerId') 
    .subscribe(this.selectedManufacturerIdChanged)