前端框架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元素的几个步骤：

1. Add a <select> element to the template and decide whether the multiple attribute should be applied.
2. 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>