与 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 来实现依赖下拉 selection，所以首先有人可以 select 制造商，然后获取所有 CarType，然后是该制造商和 CarType 的所有变体。有了这个 selection 之后，我需要将检索到的模型对象存储在另一个模型对象中，稍后将存储在数据库中。

我不知道如何使用 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>

然后对变体执行相同的操作。

您可以使用属性Observer 观察属性（selectedManufacturerId 和 selectedCarTypeId）并在更改处理程序中检索数据：

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

与 Aurelia 相关的下拉列表？

Depended dropdowns with Aurelia?

data-binding

binding

typescript

aurelia