前端框架Aurelia - Binding Selects（一）

1.Intruduction

A 

<select>

 element
can serve as a single-select or multiple-select "picker" depending on whether the 

multiple

 attribute
is present.

select元素可以是单选也可以是多选，在于multiple属性是否存在。

配置select元素的几个步骤：

Add a 

<select>

 element to
the template and decide whether the 

multiple

 attribute
should be applied.
Bind the select element's 

value

 attribute
to a property. In "multiple" mode, the property should be an array. In singular mode it can be any type.
       
       用value属性绑定select元素和属性。在多选模式，和value绑定的property应该是一个array；
       在单选模式，property可以是任何type。
3.Define the select element's 

<option>

 elements.
You can use the 

repeat

 or
add each option element manually.
定义select元素的option元素。可以用repeat来遍历或者手动的添加。
4.Specify each option's value via the 

model

 property: 

<option
model.bind="product.id"></option>

 You can use the standard 

value

 attribute
instead of 

model

, just remember- it will coerce anything it's assigned to a string.
指定每一个select的value，通过model属性。value也可以用来替代model，但是value会强制转换任何assign给
       option的值成string。

2.Select Number

export interface IProduct {
id: number;
name: string;
}

export class App {
products: IProduct[] = [
{ id: 0, name: 'Motherboard' },
{ id: 1, name: 'CPU' },
{ id: 2, name: 'Memory' },
];

selectedProductId: number = null;
}

<template>
<label>
Select product:<br/>
<select value.bind="selectedProductId"> //select绑定的view model里面的数据。
<option model.bind="null">Choose...</option>
<option repeat.for="product of products"
model.bind="product.id">  //给每个option绑定一个值
${product.id} - ${product.name}
</option>
</select>
</label>
Selected product ID: ${selectedProductId}
</template>

整个select有很多option，每个option都绑定model.bind自己的值，整个select绑定的是view midel里面的store。
所以选中的option的值最后会存到select绑定的store里面。

<option model.bind="3">Choose...</option>

如果我们把代码改成这样，选择choose的时候就会显示3.因为selectedProductId这个变量是number类型的。
所以model.bind的时候要给number类型。

3.Select Objects

export interface IProduct {
id: number;
name: string;
}

export class App {
products: IProduct[] = [
{ id: 0, name: 'Motherboard' },
{ id: 1, name: 'CPU' },
{ id: 2, name: 'Memory' },
];

selectedProduct: IProduct = null;
}

<template>
<label>
Select product:<br/>
<select value.bind="selectedProduct">
<option model.bind="null">Choose...</option>
<option repeat.for="product of products"
model.bind="product">
${product.id} - ${product.name}
</option>
</select>
</label>

Selected product: ${selectedProduct.id} - ${selectedProduct.name}
</template>

我们可以发现selectedProduct这个变量是IProduct类型的。
这个变量是和select的value属性绑定的。
这个变量的类型规定了每个option的model.bind的数据类型。这两个地方的类型要一样。

4.Select Object with Matcher

还能怎样，就是页面刷新select的初始选项呗。
export interface IProduct {
id: number;
name: string;
}

export class App {
products: IProduct[] = [
{ id: 0, name: 'Motherboard' },
{ id: 1, name: 'CPU' },
{ id: 2, name: 'Memory' },
];

productMatcher = (a, b) => a.id === b.id;

selectedProduct: IProduct = { id: 1, name: 'CPU' };
}

<template>
<label>
Select product:<br/>
<select value.bind="selectedProduct" matcher.bind="productMatcher">
<option model.bind="null">Choose...</option>
<option repeat.for="product of products"
model.bind="product">
${product.id} - ${product.name}
</option>
</select>
</label>

Selected product: ${selectedProduct.id} - ${selectedProduct.name}
</template>

5.Multiple Select Numbers

export interface IProduct {
id: number;
name: string;
}

export class App {
products: IProduct[] = [
{ id: 0, name: 'Motherboard' },
{ id: 1, name: 'CPU' },
{ id: 2, name: 'Memory' },
];

selectedProductIds: number[] = [];
}

<template>
<label>
Select products:
<select multiple value.bind="selectedProductIds"> //multiple是多选必须加上的属性，select上
<option repeat.for="product of products"
model.bind="product.id">
${product.id} - ${product.name}
</option>
</select>
</label>
Selected product IDs: ${selectedProductIds}
</template>