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来实现dependend下拉选项，所以首先有人可以选择制造商，然后获取所有CarTypes，然后获取该制造商和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>

然后为Variant做同样的事情。

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

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

与Aurelia相关的下拉菜单？

1 个答案: