依赖Aurelia的下拉列表？

Question

我有一个HTTP的API，我可以用它来查询有关汽车相关的东西有了这样出来的API的模型对象：

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

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

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

这些方法来获取数据：

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

现在我必须使用Aurelia来实现依赖和下拉选择，因此首先有人可以选择制造商，然后获取所有的CarType，然后获取该制造商和CarType的所有变体。选择完后，我需要将检索到的模型对象存储在稍后将存储在数据库中的另一个模型对象中。

我不知道如何用aurelia的绑定系统来构建这个。有任何想法吗？

Answer 1

您可以使用getManufacturers（）检索制造商列表并将结果绑定到下拉列表开始。

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> 

再观察selectedManufacturerId财产，当它改变时与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> 

然后做的变体相同。

你可以观察使用propertyObserver属性（selectedManufacturerId和selectedCarTypeId）和检索的变化处理程序中的数据：

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