Depended dropdowns with Aurelia?

Question

I have an http-api I can use to query about car related stuff with model objects like these coming out of the api:

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

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

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

and these methods to get the data:

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

Now I have to use Aurelia to implement dependend dropdown selections so first someone can select a Manufacturer, then gets all the CarTypes, then all the Variants for that Manufacturer and CarType. After I have this selection, I need to store the retrieved model objects in another model object that will be stored in a database later on.

I have no clue how to structure this with aurelia's binding system. Any Ideas?

Rabah Rabah · Accepted Answer · 2017-10-16T10:39:52

you can start by retrieving the list of manufacturers using getManufacturers() and binding the result to the dropdown.

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>

then observe the selectedManufacturerId property and when it changes retrieve the related car types with 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>

then do the same for the Variant.

you can observe the properties (selectedManufacturerId and selectedCarTypeId) using propertyObserver and retrieve the data in the change handler:

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

Depended dropdowns with Aurelia?

1 Answers