依賴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)